Bonjour j'essaye de cacher et afficher des élément grâce a toggle

sa marche mais mon problème et : que jais plusieurs élément (venant de ma bdd) et chaque fois que je click y'a tout les élément qui s'affiche et non pas que se du div "parent "

merci a vous

mon html :

Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
<div class="toggler">
    <?=$categorie['categorie_name']?>
</div>
<div class="toggle">
    <ul>
        <li>exempple</li>
        <li>exempple</li>
        <li>exempple</li>
        <li>exempple</li>
        <li>exempple</li>
    </ul>
</div>
et dans mon css :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
.toggle{
    display:none;
}

mon js
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
jQuery(document).ready(function()
{
    // On cache la zone de texte
    jQuery('.toggle').hide();
    // toggle() lorsque le lien avec la class .toggler est cliqué
    jQuery('.toggler').click(function()
    {
        jQuery('.toggle').slideToggle(400);
    });
});

merci a vous !!!