web-dev-qa-db-fra.com

Bootstrap 4 Collapse Accordion - ayez toujours un panneau ouvert

J'utilise le composant d'effondrement de Bootstrap 4.0 dans un accordéon similaire à ce qu'ils ont sur leur docs .

<div id="accordion">
  <div class="card">
    <div class="card-header" id="headingOne">
      <h5 class="mb-0">
        <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </button>
      </h5>
    </div>

    <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingTwo">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </button>
      </h5>
    </div>
    <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="card">
    <div class="card-header" id="headingThree">
      <h5 class="mb-0">
        <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </button>
      </h5>
    </div>
    <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
      <div class="card-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-Origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

Donc, l'élément n ° 1 est développé par défaut. Ensuite, lorsque vous cliquez sur le produit n ° 3, le n ° 1 se ferme et le n ° 3 se développe ... Parfait!

Cependant, l'action par défaut est que si l'élément # 3 est développé et que vous cliquez sur cet en-tête, le panneau se ferme et il ne vous reste plus qu'une liste d'en-têtes. J'aimerais aller un peu plus loin: si nous fermions le point 3, le point 1 serait élargi, de sorte que ce serait le panneau "par défaut" qui serait ouvert si aucune autre sélection n'avait été effectuée.

J'ai vu un solution pour Bootstrap3 où un panneau est toujours ouvert, mais j'aimerais pouvoir disposer d'un panneau spécifique (élément n ° 1) comme panneau de sauvegarde. Ceci est le script pour référence facile:

$('.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();
});
bootstrap-4bootstrap-accordion
4
bou77

Vous pouvez utiliser l'événement masqué d'effondrement. Dans ce cas, utilisez .eq(0) puisque 0 est l’indice de la div première divisible.

$('.collapse').on('hidden.bs.collapse', function () {
    $('.collapse').eq(0).collapse('show');
})

Pour aller plus loin, vous pouvez ajouter une nouvelle variable de données default au parent #accordion ...

<div id="accordion" class="accordion" data-default="1">..</div>

Et puis changez le jQuery pour utiliser cette variable ..

/* default accordion variable method */
$('.collapse').on('hidden.bs.collapse', function () {
  var defaultDiv = $($(this).data("parent")).data("default");
  $('.collapse').eq(defaultDiv-1).collapse('show');
})

Démo: https://www.codeply.com/go/NilPIQD9oi

Une autre option consiste à empêcher tout accordéon ouvert de se fermer, comme je expliqué dans cette réponse .

0
Zim

Tu peux essayer

jQuery(function($){
    $('[data-toggle=collapse]').on('click', function (e) {
        e.preventDefault();
        if(! $(this).hasClass('collapsed')){
            e.stopPropagation();
            return false;
        }
    });
});
0
Dzung Nguyen