fold div on click

Question

I want to fold down the div onclick event and on another click want to fold up the div

my jquery is following

$(".fold_reply").click(function() {

    if ($('.reply').css('display', 'none')) {
        $(".reply").show("fold", {}, 500);
    }
    else {
        $(".reply").hide("fold", {}, 500);
    }

});​

and the div I want to fold is having display:none at the initial point

In My reply tag < div class="reply" style="display:none; " > at the initial reply is not shown

so when I click then div is fold down but on other div it is not fold up
Please help me

Answer 1

$(".fold_reply").click(function() {
    $(".reply").toggle(500)
}

Toggle will show or hide the element depending on its current state, eliminating your if block.

Check this fiddle out for an example:

http://jsfiddle.net/z9rGz/3/

Answer 2

yes @levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.

$(".fold_reply").click(function() {

    if ($('.reply').css('display', 'none')) {
        $(".reply").slideDown("slow");
    }
    else {
        $(".reply").slideUp("fast");
    }

});​