web-dev-qa-db-fra.com

bootstrap.js Accordion Collapse/Expand

J'essaie de créer des boutons précédent/suivant sur chaque corps d'accordéon.

Je n'arrive pas à trouver un moyen de réduire/développer une section donnée. J'ai essayé de supprimer la classe in du accordion-body mais cela ne semble pas s'effondrer.

        $(".accordion-body").each(function(){
            if($(this).hasClass("in")) {
                $(this).removeClass("in");
            }
        });

De plus, chaque fois que j'utilise la méthode .collapse, j'obtiens une erreur javascript disant que l'objet n'a pas de méthode collapse.

javascriptjquerytwitter-bootstrap
33
Michael

La classe in indique simplement qu'une section est ouverte. Le module Javascript applique les mêmes styles en ligne que .in, donc la suppression de la classe est insuffisante.

Vous devez utiliser l'API du module pour interagir par programme avec l'accordéon, via la méthode .collapse():

$('.accordion-body').each(function(){
    if ($(this).hasClass('in')) {
        $(this).collapse('toggle');
    }
});

Ou, vous pouvez condenser ceci en:

$('.accordion-body.in').collapse('toggle');

Si vous souhaitez uniquement réduire les sections ouvertes:

$('.accordion-body').collapse('hide');

Si vous souhaitez uniquement développer les sections fermées:

$('.accordion-body').collapse('show');
66
Daniel Wright

Voici une autre solution:

/**
 * Make an accordion active
 * @param {String} id ID of the accordion
 */
var activateAccordion = function (id) {
    // Get the parents
    var parents = $('a[href="#' + id + '"]').parents('.panel-group').children('.panel');

    // Go through each of the parents
    $.each(parents, function (idx, obj) {
        // Check if the child exists
        var find = $(obj).find('a[href="#' + id + '"]'),
            children = $(obj).children('.panel-collapse');

        if (find.length > 0) {
            // Show the selected child
            children.removeClass('collapse');
            children.addClass('in');
        } else {
            // Hide the others
            children.removeClass('in');
            children.addClass('collapse');
        }
    });
};

La partie importante du code est la combinaison, en rappelant le .collapse class, et pas seulement l’utilisation de .in :

// Show the selected child
children.removeClass('collapse');
children.addClass('in');

et

// Hide the others
children.removeClass('in');
children.addClass('collapse');

L'exemple ci-dessus a été testé dans Bootstrap v3.3.4 de Twitter.

3
Cristi Draghici

Cela fonctionne pour les accordéons dans Bootstrap 3:

var selector = $('.panel-heading a[data-toggle="collapse"]');
selector.on('click',function() {
  var self = this;
  if ($(this).hasClass('collapsed')) {
    $.each(selector, function(key, value) {
      if (!$(value).hasClass('collapsed') && value != self) {
        $(value).trigger('click');
      }
    });
  }
});

Je simule un clic sur les autres onglets d'accordéon avec $(value).trigger('click');. Selon le API , vous devriez pouvoir utiliser la méthode .collapse(), à savoir $(value).collapse('hide');. Mais cela ne fonctionne pas pour une raison quelconque alors trigger c'est ...

1
anthonygore

Pour ce genre de problème, utilisez addClass ("in"); uniquement en raison de l'utilisation de ".collapse ('bascule/masque/affiche');" perturbera la future fonctionnalité de bascule.

0
Vikram

J'ai fait,

$('.mb-0').click(function(){
  $('.collapse').collapse('hide');
  $('.collapse.in').collapse('show');
});

et ça marche pour moi

0
Raphael Oliveira

Un autre cas d'utilisation connexe est lorsque nous avons des formulaires dans des accordéons et que nous voulons développer l'accordéon avec des erreurs de validation. Prolonger la réponse de Daniel Wright https://stackoverflow.com/a/12698720/6504104 , nous pouvons faire quelque chose comme:

/**
 * Expands accordions that have fields with errors
 *
 */
var _expandAccordions = function () {
    $form           = $('.my-input-form');
    // you can adjust the following lines to match your form structure / error classes
    var $formGroups = $form.find('.form-group.has-error');  
    var $accordions = $formGroups.closest('.accordion-body');

    $accordions.each(function () {
        $(this).collapse('show');
    });
};
0
Azhar Khattak

avec Vanilla javascript 

  const el = document.getElementById('bodyCollapse');
  el.click();

où tagsCollapse est id du bouton de déclenchement d'effondrement d'origine. Quelque chose comme - 

           <a
              data-toggle="collapse"
              href="#accordionBody"
              role="button"
              id="bodyCollapse"
              aria-expanded="false"
              aria-controls="accordionBody"
            >
             accordion header
            </a>

Vous pouvez envelopper le script dans une fonction qui accepte un paramètre (id) et l'invoquer chaque fois que vous devez réduire un accordéon.

0
Emmanuel Ndukwe

En utilisant Bootstrap 4, ajoutez les boutons suivants dans le corps de la carte

<input type="button" class="btn btn-secondary btn-block btn-sm mt-3 text-center card-proceed-next" value="Proceed" />
<input type="button" class="btn btn-secondary btn-block btn-sm mt-3 text-center card-proceed-prev" value="Previous" />

Ajoutez le javascript suivant (inclut les panneaux d'affichage Azhar Khattak contenant des erreurs de validation):

$(function () {
    $('.card-proceed-next').click(function (e) {
        e.preventDefault();
        $(e.target).closest('.collapse').collapse('hide'); // hide current accordion panel
        $(e.target).closest('.card').next('.card').find('.collapse').addClass('show'); // show next accordion panel
    });

    $('.card-proceed-prev').click(function (e) {
        e.preventDefault();
        $(e.target).closest('.collapse').collapse('hide'); // hide current accordion panel
        $(e.target).closest('.card').prev('.card').find('.collapse').addClass('show'); // show previous accordion panel
    });

    var $elErrors = $('#accordion').find('.field-validation-error'); // elements with error class
    var $accordionsWithErrors = $elErrors.closest('.collapse'); // accordions with error elements 
    if ($accordionsWithErrors.length > 0) $('.collapse').collapse(); // collapse all accordion panels due to the first accordion panel shown as default
    $accordionsWithErrors.each(function () {
        $(this).addClass('show'); // show accordion panels with error messages
    });
});
0
Jodda