bootstrap.js Accordion Collapse / Expand

Question

I\'m trying to create previous / next buttons on each accordion body.

I can\'t figure out a way to collapse / expand a certain section. I tried removing the class <

Answer 1

Here is another 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');
        }
    });
};

The important part of the code is the combination, remembering the .collapse class, not just using .in:

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

and

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

The above example has been tested in Twitter's Bootstrap v3.3.4

Answer 2

Using Bootstrap 4 add the following buttons inside the card body

<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" />

Add the following javascript (includes Azhar Khattak show panels with validation errors):

$(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
    });
});

Answer 3

with vanilla javascript

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

where tagsCollapse is id of the original collapse trigger button. Something like -

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

You could wrap the script in a function that accepts one parameter (id) and invoke the function whenever you need to collapse an accordion.

Answer 4

I did,

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

and this works for me

Answer 5

For this kind of problem use addClass("in"); only because of using ".collapse('toggle/Hide/Show');" will disturb the future toggle functionality.

Answer 6

Another related use case is when we have forms inside accordions & we want to expand accordion with validation errors. Extending the answer by Daniel Wright https://stackoverflow.com/a/12698720/6504104, we can do something like

/**
 * 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');
    });
};