CODEWITHSUNDEEP
jquery
Soltechy
Soltechy

Reputation: 87

jquery toggle & hide others

I've been learning jQuery, and I'm trying to get a little list going that I can hide and show stuff based on a click. I have it set up to the point where I can click to expand and it'll close all others and expand the correct one, but unfortunately I can't figure out how to make it close by clicking again (which I thought toggle would do).

$(document).ready(function(){
    $(".expand").click(function() {
        $(".rating-container").hide();
        $(this).find(".rating-container").toggle();
    });
});

Thanks for any help you guys can provide!

http://jsfiddle.net/pDALQ/

Upvotes: 0

Views: 98

Answers (2)

Jay Blanchard
Jay Blanchard

Reputation: 34426

Because you are hiding the containers first, the toggle will not work. Here is another method to do it - 

$(document).ready(function(){
    $(".expand").click(function() {
        if( $(this).find(".rating-container").is(':visible') ) {
            $(".rating-container").hide();
        } else {
            $(".rating-container").hide();
            $(this).find(".rating-container").show();
        }
    });
});

http://jsfiddle.net/jayblanchard/pDALQ/4/

Upvotes: 0

j08691
j08691

Reputation: 207923

Hide all the other ratings containers first ($('.expand').not(this).find(".rating-container").hide()).

Try:

$(document).ready(function () {
    $(".expand").click(function () {
        $('.expand').not(this).find(".rating-container").hide();
        $(this).find(".rating-container").toggle();
    });
});

jsFiddle example

Upvotes: 4

Related Questions