Changement de couleur page heading - accordéon Bootstrap

Marine Mlg
Les bases HTML/CSS

Bonjour,

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>

CSS :
.panel-clr.on {
background: #a983da;
}
.panel-clr {
background: #565656;
}

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

1 réponse

Nairolf

Si j'ai bien compris, tu veux que lorsqu'on clique sur un autre titre, tu veux que le précédent reprend son état d'origine, c'est simple:

$( function() {
    $('.panel-clr').click( function() {
        $('.panel-clr.on').removeClass('on');
        $(this).addClass('on');
    } )
});

Bon là c'est du code basique, si tu veux optimiser je te conseille de faire un vérification pour voir si l'élément actuel n'a pas déjà la class, afin d'éviter une action inutile.