CODEWITHSUNDEEP
javascriptjquery
user2178521
user2178521

Reputation: 843

Jquery toggle multiple div

I have 4 div, a b c d, use Jquery toggle to open and close, each one close by it self.

There is also one button can close and open all.

However if user click 'b' first, than click 'close all' button. it will become. a, c, d close, b open. Is any way to make one button hide than change function to show?

http://jsfiddle.net/vyPHZ/

$(document).ready(function(){

    $(".toggle").click(function(){$(this).next("div").slideToggle(300);});

    $("#collapse").click(       
        function(){
            $(".content").toggle(); 
        }
    );  
});

Upvotes: 3

Views: 193

Answers (2)

Roko C. Buljan
Roko C. Buljan

Reputation: 205987

http://jsfiddle.net/vyPHZ/2/

$(".toggle").click(function () {
    $(this).next(".content").slideToggle(300);
});

var io = 0;
$("#collapse").click(function () {       
    $(".content")[io++%2?'show':'hide']();
});

where also, if you like, instead of 'show':'hide' you can use 'slideDown':'slideUp' http://jsfiddle.net/vyPHZ/3/

Upvotes: 3

Hieu Nguyen
Hieu Nguyen

Reputation: 8623

You can use one extra class for the state of the $.content, then check it when deciding to hide or show:

http://jsfiddle.net/vyPHZ/1/

Upvotes: 2

Related Questions