Bootstrap.js Accordion Collapse/Expand

Ответ 1

Класс in - это просто индикатор того, что раздел открыт. Модуль Javascript применяет те же встроенные стили, что и .in, поэтому удаление класса недостаточно.

Вам необходимо использовать API-интерфейс модуля для программного взаимодействия с аккордеоном с помощью метода .collapse():

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

Или вы можете сконденсировать это до:

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

Если вы хотите только свернуть любые открытые разделы:

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

Если вы хотите только расширить любые закрытые разделы:

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

Ответ 2

Вот еще одно решение:

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

Важной частью кода является комбинация, помнящая класс .collapse, а не только .in:

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

и

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

Приведенный выше пример был протестирован в Twitter Bootstrap v3.3.4

Ответ 3

Это работает для аккордеонов в 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');
      }
    });
  }
});

Я имитирую щелчок других вкладок аккордеона с помощью $(value).trigger('click');. В соответствии с API вы должны просто использовать метод .collapse(), т.е. $(value).collapse('hide');. Но по какой-то причине это не работает, поэтому trigger это...

Ответ 4

Для этой проблемы используйте addClass ( "in" ); только из-за использования ".collapse('toggle/Hide/Show'); будет мешать будущей функции переключения.

Ответ 5

Другой связанный случай использования - когда у нас есть формы внутри аккордеонов, и мы хотим расширить аккордеон ошибками валидации. Расширяя ответ Дэниела Райта fooobar.com/questions/193661/..., мы можем сделать что-то вроде

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

Ответ 6

Я сделал,

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

и это работает для меня

Ответ 7

Используя Bootstrap 4, добавьте следующие кнопки в корпус карты

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

Добавьте следующий javascript (включает в себя показательные панели "Азхар Хаттак" с ошибками проверки):

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

Ответ 8

с ванильным JavaScript

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

где tagsCollapse - это id исходной триггерной кнопки свертывания. Что-то вроде -

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

Вы можете заключить скрипт в функцию, которая принимает один параметр (id), и вызывать функцию всякий раз, когда вам нужно свернуть аккордеон.