Discussion :

[dominos]

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 HTML, Bootstrap, CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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,

[dominos]

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 Javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

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 HTML, Bootstrap, CSS :

Sélectionner tout - Visualiser dans une fenêtre à part

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>