Probleme liste déroulante

Voila mon souci quand je clic sur mon bouton au lieu que l'action de slideDown se fasse sur la div bouton cliquer elle s'applique a tous les elements j'ai essayer de lui faire trouver avec des parents mais ca ne fonction pas

  <div class="my-publications" >
                    </thead>
        
                <div class="dropdown">
                            <div class="fichier">
                               <a href="#-" rel="popin-ajout" class=" popin-link folder" ><img src="../img/fond_vert_dossier.png"> </a> 
                            </div>
                

                        <div class="folder">
                                    <a href="#" title="Monter" class="up"><span>Monter</span></a> 
                                    <a href="#" title="Descendre" class="down"><span>Descendre</span></a>
                        </div>
                       <div>
                                    <p>Feque porro quisquam est qui dolorem ipsum quia</p>
                                </div>
                          
                                   
                        <div>
                                 <a href="#" class="folder-arrow" data-toggle="dropdown"><img  src="../img/square_green.png" class="arrow"></a>
                        </div>
                        <div class="supprimer">
                                     <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a>
                        
                        </div>

                        <div class="dropdown-new">
                                <table>
                                   <tbody>
                                        <tr class="toggle">
                                            <td colspan="3">
                            
                                            <td class="child" colspan="3">
                                                 <a href="#" title="Monter" class="up"><span>Monter</span></a>
                                                 <a href="#" title="Descendre"class="down" ><span>Descendre</span></a>
                                            </td>
                                            <td colspan="3" class="text">Neque porro quisquam est qui dolorem ipsum quia</td>
                                            <td colspan="1"> 
                                                <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a> 
                                            </td>
                                            </td>
                                        </tr>
                                    </tbody>
                                </table>  
                        </div>
                         <div class="dropdown-new">
                                <table>
                                   <tbody class="toggle">
                                            <td colspan="3">
                            
                                            <td class="child" colspan="3">
                                                 <a href="#" title="Monter" class="up"><span>Monter</span></a>
                                                 <a href="#" title="Descendre"class="down" ><span>Descendre</span></a>
                                            </td>
                                            <td colspan="3" class="text">Neque porro quisquam est qui dolorem ipsum quia</td>
                                            <td colspan="1"> 
                                                <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a> 
                                            </td>
                                            </td>
                    
                               </tbody>
                                    </table>  
                        </div>    
                    </div>
                    <div class="dropdown">
                            <div class="fichier">
                               <a href="#-" rel="popin-ajout" class=" popin-link folder" ><img src="../img/fond_vert_dossier.png"> </a> 
                            </div>
                

                        <div class="folder">
                                    <a href="#" title="Monter" class="up"><span>Monter</span></a> 
                                    <a href="#" title="Descendre" class="down"><span>Descendre</span></a>
                        </div>
                       <div>
                                    <p>Feque porro quisquam est qui dolorem ipsum quia</p>
                                </div>
                          
                                   
                        <div>
                                 <a href="#" class="folder-arrow" data-toggle="dropdown"><img  src="../img/square_green.png" class="arrow"></a>
                        </div>
                        <div class="supprimer">
                                     <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a>
                        
                        </div>

                         <div class="dropdown-new">
                                <table>
                                   <tbody class="toggle">
                                            <td colspan="3">
                            
                                            <td class="child" colspan="3">
                                                 <a href="#" title="Monter" class="up"><span>Monter</span></a>
                                                 <a href="#" title="Descendre"class="down" ><span>Descendre</span></a>
                                            </td>
                                            <td colspan="3" class="text">Neque porro quisquam est qui dolorem ipsum quia</td>
                                            <td colspan="1"> 
                                                <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a> 
                                            </td>
                                            </td>
                    
                               </tbody>
                                    </table>  
                        </div>    
                             <div class="dropdown-new">
                                <table>
                                   <tbody class="toggle">
                                            <td colspan="3">
                            
                                            <td class="child" colspan="3">
                                                 <a href="#" title="Monter" class="up"><span>Monter</span></a>
                                                 <a href="#" title="Descendre"class="down" ><span>Descendre</span></a>
                                            </td>
                                            <td colspan="3" class="text">Neque porro quisquam est qui dolorem ipsum quia</td>
                                            <td colspan="1"> 
                                                <a href="#" title="Supprimer" class="remove"><span>Supprimer</span></a> 
                                            </td>
                                            </td>
                    
                               </tbody>
                                    </table>  
                        </div>    
                    </div>
                       

$(".folder-arrow").click(function(e){
e.preventDefault();
$(this).siblings("toggle").slideToggle('600')
   
});

Modifié par ezkim (27 Apr 2015 - 17:05)

http://tuljo.com/web-development/expanding-collapsing-sliding-div-jquery

Avec ce code ca marche mais il est moche

$(".folder-arrow > img").click(function(e){
    e.preventDefault();
   $(this).parent().parent().next().next().children().children().slideToggle('600');
});