Как сохранить только один элемент открытым в аккордеоне jQuery с slideToggle? - PullRequest
Новая
       40

Как сохранить только один элемент открытым в аккордеоне jQuery с slideToggle?

0 голосов
/ 25 января 2019

Мне удалось создать рабочий аккордеон jQuery для сайта WordPress.Теперь мне интересно, как убедиться, что открыт только один блок?То есть, когда я переключаю один элемент, два других автоматически сворачиваются.

Есть идеи, как это сделать?

Кроме того, код, вероятно, можно упростить, но я не совсем уверен, как,Это кажется довольно повторяющимся: 

jQuery(document).on("click", ".accordion-toggle-1", function() {
    jQuery(".row:nth-child(2)").nextUntil(".row:nth-child(12)").slideToggle();
    jQuery(".accordion-icon-1 h1").fadeOut(function () {
        jQuery(".accordion-icon-1 h1").text((jQuery(".accordion-icon-1 h1").text() == '+') ? '-' : '+').fadeIn();
    });
});
jQuery(document).on("click", ".accordion-toggle-2", function() {
    jQuery(".row:nth-child(13)").nextUntil(".row:nth-child(20)").slideToggle();
    jQuery(".accordion-icon-2 h1").fadeOut(function () {
        jQuery(".accordion-icon-2 h1").text((jQuery(".accordion-icon-2 h1").text() == '+') ? '-' : '+').fadeIn();
    });
});
jQuery(document).on("click", ".accordion-toggle-3", function() {
    jQuery(".row:nth-child(21)").nextUntil(".row:nth-child(25)").slideToggle();
    jQuery(".accordion-icon-3 h1").fadeOut(function () {
        jQuery(".accordion-icon-3 h1").text((jQuery(".accordion-icon-3 h1").text() == '+') ? '-' : '+').fadeIn();
    });
});

function starttoggle() {
    jQuery(".row:nth-child(2)").nextUntil(".row:nth-child(12)").slideToggle();
    jQuery(".row:nth-child(13)").nextUntil(".row:nth-child(20)").slideToggle();
    jQuery(".row:nth-child(21)").nextUntil(".row:nth-child(25)").slideToggle();
}
setTimeout(starttoggle, 1400);

1 Ответ

0 голосов
/ 25 января 2019

Посмотрите на примеры, приведенные здесь: https://getbootstrap.com/docs/4.0/components/collapse/

См. Заголовок «Пример аккордеона».

...