Question

I have a simple toggle function to show and hide content. It is triggered on the click of the H2, and added a “show all” / “hide all” function.

The issue I’m having is that when you expand a couple of the content areas, then click “Show All” it hides the open ones and shows the hidden ones instead of just showing the hidden ones. I know that its caused by the “.toggle” function firing and toggling the open ones closed. In theory I suspect I’ll have to add a class to the expanded ones and run a check to see if any are open and don’t toggle those, only expanding the hidden ones. To close with the “Close all” button I’d have to do the inverse?

How do I remedy this? example is here

Answer 1

Because toggle will just toggle the state(show/hide) of the element. In this case don’t use slideToggle, instead use slideUp/slideDown conditionally. Try this.

$(".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