Bootstrap 3 Réduire - ajouter une classe active à un panneau ouvert
tout d'abord voici le violon: http://jsfiddle.net/krish7878/h38jn324/
Simple question lorsqu'un panneau est cliqué (et il s'élargit pour montrer son contenu respectif), une classe "active" doit être ajouté à "panneau de tête".
J'ai trouvé la même question, mais aucune de ces solutions ne semble fonctionner (étrangement). Toute aide serait appréciée.
Code HTML:
<div class="accordion-2 panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
Our Mission
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div>
</div><!-- /#collapseOne -->
</div><!-- /.panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
Success Stories
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div><!-- /.panel-body -->
</div><!-- /#collapseTwo -->
</div><!-- /.panel -->
<div class="panel panel-default last">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
Our Story
</a>
</h4>
</div><!-- /.panel-heading -->
<div id="collapseThree" class="panel-collapse collapse">
<div class="panel-body">
<p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
</div><!-- /.panel-body -->
</div><!-- /#collapseTwo -->
</div><!-- /.panel -->
Code JS:
jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').on('click', function () {
jQuery('.accordion-2 .panel-heading a[data-toggle="collapse"]').removeClass('actives');
$(this).addClass('actives');
});
source d'informationauteur chandan
Vous devez vous connecter pour publier un commentaire.
Essayez ceci:
Vérifier JSFiddle Démo
Mise à jour 1:
Pour définir un groupe comme active par défaut sur la première charge, il suffit d'ajouter le
active
classe manuellement à l'panel-heading
dans le code HTML.Mise à jour 2:
Bien que cette réponse est marqué comme acceptée réponse, je vous recommande fortement de prendre un coup d'oeil à la
Blizwire
réponse trop.La réponse actuelle (par Moshtaf) est à l'aide d'un standard, cliquez sur l'événement. Cependant, Bootstrap est doté d'un événement pour l'ouverture/fermeture de rétractables éléments, comme souligné par Jurriaan, qui est beaucoup plus sûr à utiliser (un clic sur le lien ne signifie pas nécessairement que le panneau est affiché). Voici une solution propre, inspiré par Jurriaan de la solution, avec un minimum de code et de sélecteurs jQuery. http://codepen.io/martinkrulltott/pen/mPgYgQ
Ces réponses ne fonctionne pas pour moi car dans certains cas: Plusieurs groupes de cellules sur 1 page, ou en cliquant sur le même titre pour masquer un panneau. Cette adaptation de https://stackoverflow.com/a/24033761/842740 fonctionne comme une solution générale et j'ai ajouté le code pour le réglage de l'ouverture par défaut du panneau sur l'état actif.
Pour quelqu'un qui est à la recherche pour le CSS solution et j'ai fatigué ce que dans Bootstrap 4:
HTML
CSS