CODEWITHSUNDEEP
jquerydom
Dirty Bird Design
Dirty Bird Design

Reputation: 5553

Toggle function not working properly

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

Upvotes: 0

Views: 868

Answers (2)

ShankarSangoli
ShankarSangoli

Reputation: 69915

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

Upvotes: 1

Nanne
Nanne

Reputation: 64419

Simple: Don't use "toggle()" for the show-all button, but use "show()". ditto for the hide-all, use "hide()".

Only use toggle() for the single clicks

Upvotes: 2

Related Questions