Bonjour,
Je ne sais pas si je suis dans la bonne rubrique mais voici mon problème.
Je suis en train de développer un mini-site avec Bootstrap et j'ai un petit bug avec mon accordéon de questions / reponses. Je voudrais que le background du page-heading change de couleur quand l'accordéon est déplié. J'ai trouvé du code sur un site et ça fonctionne plutôt bien sur le cas passant, c'est à dire : mon background de Titre est gris par défaut, tous les accordéons sont pliés. Je clique sur un titre, le contenu s'affiche, mon background de titre passe en violet, je reclique sur le titre pour refermer l'accordéon, le bg repasse en gris. Je clique sur un autre titre, déplie le contenu, le referme... Pas de soucis. Voici mon code puis mon "problème":
Voici mon code html :
Mon code CSS :
Mon code JS :
Mon "problème" vient sur le cas de test suivant :
Je clique sur le Titre 1, le contenu s'affiche et mon background passe en violet : OK
Puis je clique sur le Titre 2, le contenu s'affiche, le bg passe en violet : OK mais le pavé du Titre 1 s'est refermé tout seul, ce qui est normal mais sans "clic" de ma part, le Titre 1 reste en violet et ne repasse pas en gris.
Que dois-je changer pour pallier à ce pb ?
Merci de votre aide et bonne journée !
Marine
Je ne sais pas si je suis dans la bonne rubrique mais voici mon problème.
Je suis en train de développer un mini-site avec Bootstrap et j'ai un petit bug avec mon accordéon de questions / reponses. Je voudrais que le background du page-heading change de couleur quand l'accordéon est déplié. J'ai trouvé du code sur un site et ça fonctionne plutôt bien sur le cas passant, c'est à dire : mon background de Titre est gris par défaut, tous les accordéons sont pliés. Je clique sur un titre, le contenu s'affiche, mon background de titre passe en violet, je reclique sur le titre pour refermer l'accordéon, le bg repasse en gris. Je clique sur un autre titre, déplie le contenu, le referme... Pas de soucis. Voici mon code puis mon "problème":
Voici mon code html :
<div class="container accordeon">
<div class="panel-group" id="accordion1">
<div class="panel panel-default">
<div class="panel-heading panel-clr">
<h4 class="panel-title">
<a href="#cla1" data-toggle="collapse" data-parent="#accordion1">Titre 1</a>
</h4>
</div>
<div class="collapse panel-collapse" id="cla1">
<div class="panel-body">
<p>Contenu 1</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-clr">
<h4 class="panel-title">
<a href="#cla2" data-toggle="collapse" data-parent="#accordion1">Titre 2</a>
</h4>
</div>
<div class="collapse panel-collapse" id="cla2">
<div class="panel-body">
<p>Contenu 2</p>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading panel-clr">
<h4 class="panel-title">
<a href="#cla3" data-toggle="collapse" data-parent="#accordion1">Titre 3</a>
</h4>
</div>
<div class="collapse panel-collapse" id="cla3">
<div class="panel-body">
<p>Contenu 3</p>
</div>
</div>
</div>
</div>
</div>
Mon code CSS :
.panel-clr.on {
background: #a983da;
}
.panel-clr {
background: #565656;
}
Mon code JS :
Javascript :
$( function() {
$('.panel-clr').click( function() {
$(this).toggleClass('on');
} )
});
Mon "problème" vient sur le cas de test suivant :
Je clique sur le Titre 1, le contenu s'affiche et mon background passe en violet : OK
Puis je clique sur le Titre 2, le contenu s'affiche, le bg passe en violet : OK mais le pavé du Titre 1 s'est refermé tout seul, ce qui est normal mais sans "clic" de ma part, le Titre 1 reste en violet et ne repasse pas en gris.
Que dois-je changer pour pallier à ce pb ?
Merci de votre aide et bonne journée !
Marine
