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

Question

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

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

Как исправить это? example is here

Answer 1

Поскольку 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'); 
    } 
}); 

Demo

Answer 2

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

использовать только toggle() для одного клика