Menu accordion

Fermé
dexcom Messages postés 35 Date d'inscription mercredi 22 janvier 2014 Statut Membre Dernière intervention 20 mars 2018 - 31 juil. 2016 à 18:28
dexcom Messages postés 35 Date d'inscription mercredi 22 janvier 2014 Statut Membre Dernière intervention 20 mars 2018 - 1 août 2016 à 17:14
Bonjour je fait un menu accordion pour un resto , le problème le menu 1 et 2 disparaissent quand je clique sur menu 1 ou 2 mais pas les autres menus , qui restent eux ouvert , je voudrait que dès que l on clic sur un menu les autres se ferment automatiquement comme le menu 1 et 2 , ma deuxième question est ce normale d'utiliser autant de <div> ou il y a t il plus simple
merci de votre aide

html :

<section id="price">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="block">
<h1 class="heading wow fadeInUp" data-wow-duration="300ms" data-wow-delay="300ms">Notre carte</h1>
<p>Tous nos plats sont préparés au moment même, nous vous demandons
un peu de patience afin de nous laisser le temps de les confectionner , Merci</p>



<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1" rel="nofollow" target="_blank"> Menu 1 </a> </h4>
</div>
<div id="collapseOne1" class="panel-collapse collapse">
<div class="panel-body"> menu1 </div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo2" rel="nofollow" target="_blank"> Menu2 </a> </h4>
</div>
<div id="collapseTwo2" class="panel-collapse collapse">
<div class="panel-body"> menu2 </div>
</div></div>





<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" > Les entrées </a></h4>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo3" rel="nofollow" target="_blank"> Chaudes </a> </h4>
<div id="collapseTwo3" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo4" rel="nofollow" target="_blank"> Froides </a> </h4>
<div id="collapseTwo4" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo5" rel="nofollow" target="_blank"> Les potages </a> </h4>
<div id="collapseTwo5" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div></div></div></div></div></div>


<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" > Les Viandes </a></h4>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo6" rel="nofollow" target="_blank"> Boeuf </a> </h4>
<div id="collapseTwo6" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo7" rel="nofollow" target="_blank"> Porc </a> </h4>
<div id="collapseTwo7" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div>

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"> <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion1" href="#collapseTwo8" rel="nofollow" target="_blank"> Poulet </a> </h4>
<div id="collapseTwo8" class="panel-collapse collapse">
<div class="panel-body"> teste </div></div></div>
</div></div></div></div></div></div></div></div></div></div>

</section>
A voir également:

1 réponse

dexcom Messages postés 35 Date d'inscription mercredi 22 janvier 2014 Statut Membre Dernière intervention 20 mars 2018
1 août 2016 à 17:14
ça va j'ai trouver merci
0