Réalisation Accordéon à deux niveaux

Bonjour,

Débutant en accordéon, je souhaite ventiler les sous-catégories du deuxième niveau (data-parent),
je ne sais pas si je dois m'orienter dans du Javascript, je trouve d'ailleurs que la fluidité bootstrap n'est pas top,
par rapport à slideToggle() ...

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34

<div id="accordionMenu"> <div class="panel panel-group panel-success text-left">   <div data-target="#menu1" class="panel-heading" data-toggle="collapse" data-parent="#accordionMenu" style="border-radius: 0px 0px 0px 0px; border-bottom: 1px dotted white;">Menu 1</div>   <div id="menu1" class="panel-default collapse"> <div data-target="#smenu1" data-toggle="collapse" class="panel-heading panel-default " data-parent="#menu1" style="border-bottom: 1px dotted #ddd;">Sous menu 1</div> <div id="smenu1" class="panel-body collapse" style="height: auto; border-bottom: 1px dotted #ddd"> blabla </div>   <div data-target="#smenu2" data-toggle="collapse" class="panel-heading panel-default" data-parent="#menu1" style="border-bottom: 1px dotted #ddd;">Sous menu 2</div> <div id="smenu2" class="panel-body collapse" style="height: auto;"> blabla </div>   </div>   <div data-target="#menu2" class="panel-heading" data-toggle="collapse" data-parent="#accordionMenu" style="border-radius: 0px 0px 0px 0px; border-bottom: 1px dotted white;">Menu 2</div>     <div id="menu2" class="panel-default collapse"> <div data-target="#smenu3" data-toggle="collapse" class="panel-heading panel-default " data-parent="#menu2" style="border-bottom: 1px dotted #ddd;">Sous menu 3</div> <div id="smenu3" class="panel-body collapse" style="height: auto; border-bottom: 1px dotted #ddd"> blabla </div>   <div data-target="#smenu4" data-toggle="collapse" class="panel-heading panel-default" data-parent="#menu2" >Sous menu 4</div> <div id="smenu4" class="panel-body collapse" style="height: auto;"> blabla </div>   </div> </div>

---

Merci d'avance pour votre réponse,

Finalement,

Voici une méthode simple pour apprendre l'accordéon ...

Quelques fausses notes certainement dans la syntaxe, mais problème de fluidité résolu.

Si celui-ci peut être utile :

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

function HideElements(id, id_click) { collection = document.querySelectorAll("[id^='"+id+"']"); co = collection.length; for (i = 0; i < co; i++) { display = window.getComputedStyle(collection[i], null).getPropertyValue("display"); if ((collection[i].style.display = display=='block')&&(id_click=='')) { collection[i].style.display = 'none';   } else if ((collection[i].style.display = display=='block')&&(collection[i]!=id_click)) { collection[i].style.display = 'none'; } }   }

---

Code:

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

<div id="accordion" class="panel-group"> <div class="panel panel-success text-left">   <div onclick="HideElements('smenu');" data-target="#menu1" class="panel-heading" data-toggle="collapse" data-parent="#accordion" style="border-bottom: 1px dotted white;">Menu 1</div> <div id="menu1" class="panel-default collapse">   <div onclick="slideToggle('smenu1'); HideElements('smenu',smenu1);" class="panel-heading panel-default " style="border-radius: 0px; border-bottom: 1px dotted #ddd;">Sous menu 1</div> <div id="smenu1" class="panel-body collapse" style="height: auto; border-bottom: 1px dotted #ddd; display: none;"> Contenu... </div>   <div onclick="slideToggle('smenu2'); HideElements('smenu',smenu2);" class="panel-heading panel-default" data-parent="#menu1" style="border-radius: 0px; border-bottom: 1px dotted #ddd;">Sous menu 2</div> <div id="smenu2" class="panel-body collapse" style="height: auto; display: none;"> Contenu... </div>   </div>   <div onclick="HideElements('smenu');" data-target="#menu2" class="panel-heading" data-toggle="collapse" data-parent="#accordion" style="border-radius: 0px;">Menu 2</div> <div id="menu2" class="panel-default collapse">   <div onclick="slideToggle('smenu3'); HideElements('smenu',smenu3);" class="panel-heading panel-default" style="border-radius: 0px; border-bottom: 1px dotted #ddd;">Sous menu 3</div> <div id="smenu3" class="panel-body collapse" style="height: auto; border-bottom: 1px dotted #ddd; display: none;"> Contenu... </div>   <div onclick="slideToggle('smenu4'); HideElements('smenu',smenu4);" class=" panel-heading panel-default" style="border-radius: 0px;">Sous menu 4</div> <div id="smenu4" class="panel-body collapse" style="height: auto; display: none;"> Contenu... </div>   </div>   </div> </div>

---

:merci: