web-dev-qa-db-fra.com

Bootstrap 3 Collapse - ajout de la classe active au panneau ouvert

tout d'abord voici le violon: http://jsfiddle.net/krish7878/h38jn324/

Question simple quand un panneau est cliqué (et qu'il se développe pour montrer son contenu respectif), une classe "active" doit être ajoutée à "en-tête de panneau". 

J'ai trouvé une question similaire 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');

});

javascriptjqueryhtmlcsstwitter-bootstrap
14
chandan

Essaye ça:

$('.panel-heading a').click(function() {
    $('.panel-heading').removeClass('active');
    if(!$(this).closest('.panel').find('.panel-collapse').hasClass('in'))
        $(this).parents('.panel-heading').addClass('active');
});

Voir la démo JSFiddle

Mise à jour 1: Pour définir un panneau comme actif par défaut lors du premier chargement, ajoutez simplement la classe active au panel-heading dans le code HTML.

Mise à jour 2: Bien que cette réponse soit marquée comme une réponse acceptée, je vous recommande vivement de consulter également la réponse Blizwire.

16
Moshtaf

La réponse actuelle (par Moshtaf) utilise un événement de clic standard. Cependant, Bootstrap a un événement intégré pour l’ouverture/la fermeture des éléments réductibles, comme le souligne 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ée de la solution Jurriaan, avec un minimum de code et de sélecteurs jQuery. http://codepen.io/martinkrulltott/pen/mPgYgQ 

$(document).ready(function() {
  $('.panel-collapse').on('show.bs.collapse', function () {
    $(this).siblings('.panel-heading').addClass('active');
  });

  $('.panel-collapse').on('hide.bs.collapse', function () {
    $(this).siblings('.panel-heading').removeClass('active');
  });
});
14
Blizwire

Ces réponses n'ont pas fonctionné pour moi dans certains cas: plusieurs groupes de panneaux sur une page ou un clic 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é du code permettant de définir le panneau ouvert par défaut sur l'état actif.

$('.panel-group .panel-collapse.in').prev().addClass('active');
$('.panel-group')
  .on('show.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').addClass('active');
  })
  .on('hide.bs.collapse', function(e) {
    $(e.target).prev('.panel-heading').removeClass('active');
  });
5
Jurriaan Roelofs

Pour quelqu'un qui recherche une solution CSS et qui ne me fatigue que dans Bootstrap 4 :

HTML

<a class="collapsed" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> Open Collapse </a>

<div class="collapse" id="collapseExample">
  <div class="card card-block card-outline-primary">
    <h3 class="text-center">Date Goes Here</h3>
  </div>
</div>

CSS

[data-toggle="collapse"]:not(.collapsed) {
  background-color: blue;
}
5
Syed

$(function() {
  $('.panel-heading').click(function() {
    if ($(this).hasClass('activestate')) {
      $(this).removeClass('activestate');
    } else {
      $('.panel-heading').removeClass('activestate');
      $(this).addClass('activestate');
    }
  });
});
a,
a:hover,
a:active,
a:focus {
  text-decoration: none !important
}
.panel-heading:hover,
.panel-heading:focus,
.panel-heading:hover a,
.panel-heading:focus a {
  color: #c9b27e;
  text-decoration: none !IMPORTANT;
}
.activestate {
  background-color: #c9b27e !IMPORTANT;
  color: white !important;
  display: block;
}
.activestate:hover a {
  color: black;
}
.panel-heading {
  display: block
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
<div class="accordion-2 panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading activestate">
      <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 -->
</div>
<!-- /.accordion-2 -->

Je pense que c'est plus logique.

2
idoliki

Toutes les autres réponses nécessitent un en-tête de panneau. Tout ce dont vous avez besoin est la cible de données. 

$('[data-toggle=collapse]').each(function() {
    var $collapse_btn = $(this),
        $collapse_target =  $(this.getAttribute('data-target'));

    $collapse_target.on('show.bs.collapse', function () {
        $collapse_btn.addClass('collapsed');
    }).on('hide.bs.collapse', function () {
        $collapse_btn.removeClass('collapsed');
    });
});
0
John Magnolia