Функция переключения не работает должным образом

Question

У меня есть простая функция переключения, чтобы показать и скрыть содержимое. Он запускается по щелчку H2 и добавляет функцию «показать все» / «скрыть все».

Проблема, с которой я столкнулся, заключается в том, что когда вы расширяете пару областей содержимого, а затем нажимаете «Показать все», он скрывает открытые и показывает скрытые, а не просто показывает скрытые. Я знаю, что это вызвано тем, что функция ".toggle" запускает и закрывает открытые. Теоретически, я подозреваю, что мне придется добавить класс к расширенным и запустить проверку, чтобы увидеть, открыты ли они, и не переключать их, а только расширять скрытые. Чтобы закрыть с помощью кнопки «Закрыть все», мне нужно сделать обратное?

Как мне исправить это? пример здесь

Answer 1

Простой: не используйте «toggle()» для кнопки «показать все», но используйте «show()». То же самое для скрытия, используйте "hide()".

Используйте только toggle() для одного клика

Answer 2

Потому что toggle просто переключит состояние (показать / скрыть) элемента.В этом случае не используйте slideToggle, вместо этого используйте slideUp/slideDown условно.Попробуйте это.

$(".toggleAll").click(function() {
    if($(this).text() == 'Show All'){
        $(".faq p").slideDown("slow");
        $(this).text('Hide All');
        $(".faq h2").addClass('active');
    }
    else{
        $(".faq p").slideUp("slow");
        $(this).text('Show All');
        $(".faq h2").removeClass('active');
    }
});

Демо