Comment faire pour que Twitter Bootstrap Accordion garde un groupe ouvert?

J’essaie d’imiter la barre Outlook en utilisant le bootstrap Twitter en utilisant l’accordéon et le plug-in de réduction, jusqu’à présent, j’ai réussi à réduire et à utiliser l’accordéon, mais il permet actuellement de réduire toutes les sections.

Je voudrais le limiter pour qu’un seul soit toujours montré.

Voici celui sur lequel je travaille: http://jsfiddle.net/trajano/SMT9D/ et je pense que c’est quelque chose qui va dans le sens de

$('#accordions').on('hide', function (event) { console.warn("HIDE TRIGGERED, check if trying to hide the active one if so stop"); }) 

Voici un moyen facile de le faire:

Nouveau Bootstrap 3

JsFiddle for Bootstrap 3.

Code pour Bootstrap 3:

 $('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); }); 

Le code vérifie si l’élément cliqué est celui qui est actuellement affiché (par la classe “in”) et s’il a la classe “in”, il arrête le processus de masquage.


Bootstrap obsolète 2

JsFiddle pour Bootstrap 2.

Code pour Bootstrap 2:

 $('.accordion-toggle').on('click',function(e){ if($(this).parents('.accordion-group').children('.accordion-body').hasClass('in')){ e.stopPropagation(); } // You can also add preventDefault to remove the anchor behavior that makes // the page jump // e.preventDefault(); }); 

Remarque: soyez prudent si vous souhaitez attacher plus d’événements de clics sur l’accordéon, car e.stopPropagation() bloquera les événements qui se produiraient après la vérification.

Je veux préciser la réponse de @Hugo Dozois

http://jsfiddle.net/SMT9D/61/

Vous devez append e.preventDefault(); pour empêcher le comportement par défaut de # HTML anchor si vous avez un défilement dans votre page

 $('.panel-heading a').on('click',function(e){ if($(this).parents('.panel').children('.panel-collapse').hasClass('in')){ e.preventDefault(); e.stopPropagation(); } }); 

Ou vous pouvez utiliser le truc CSS simple comme suit:

 /* prevent the active panel from collapsing */ .panel-group [aria-expanded=true]{ /* http://caniuse.com/#feat=pointer-events Works for MOST modern browsers. (- Opera Mobile) */ pointer-events: none; } 

doivent avoir des balises appropriées sur les liens de panneau inactifs

  aria-expanded="false" 

Mis à jour 2018

Voici comment restr au moins ouvert dans Bootstrap v3 ou v4. Cela signifie que l’accordéon ouvert ne peut être fermé qu’en basculant un autre ouvert .

Bootstrap 4

https://www.codeply.com/go/bbCcnl0jBB

 // the current open accordion will not be able to close itself $('[data-toggle="collapse"]').on('click',function(e){ if ( $(this).parents('.accordion').find('.collapse.show') ){ var idx = $(this).index('[data-toggle="collapse"]'); if (idx == $('.collapse.show').index('.collapse')) { e.stopPropagation(); } } }); 

Voir aussi cette réponse qui montre comment spécifier un accordéon “par défaut” qui s’ouvrira lorsque tous les autres seront fermés.


Bootstrap 3

 $('[data-toggle="collapse"]').on('click',function(e){ if($(this).parents('.panel').find('.collapse').hasClass('in')){ var idx = $(this).index('[data-toggle="collapse"]'); var idxShown = $('.collapse.in').index('.accordion-body'); if (idx==idxShown) { e.stopPropagation(); } } }); 

https://www.codeply.com/go/yLw944BrgA

 
..
..
...

( Remarque: la classe de panel est nécessaire dans Bootstrap 3 pour que le comportement en accordéon fonctionne )

Bootstrap 4.0

 $('.card').click(function(e) { if ( $(this) .find('.collapse') .hasClass('show') ) { e.stopPropagation(); } }); 

Ce bloc de code vérifie si la carte cliquée est réduite (en regardant le div avec le collapse classe). Lorsque la carte est actuellement affichée, elle cesse de propager l’événement .

Selon la version 3.3.6 de bootstarp, suivez simplement la structure

  
collopse 1 body here