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

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

• javascript
• jquery
• html
• css
• fold

• Are you using jQuery UI? – user1726343 Commented Oct 27, 2012 at 9:32

5 Answers 5

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

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");
    }

});​

You should use the jquery .toggle or jquery UI .toggle method which does just that.

But the error in your logic is the $('.reply').css('display', 'none'). This sets the display to none. It does not check if it is none...

If you had to use that code you should change it to

if ( $('.reply').css('display') === 'none') )

Use the jQueryUI version of toggle() since you seem to be using a jQuery UI effect

.toggle( effect [, options ] [, duration ] [, complete ] )

Reference: http://api.jqueryui.com/toggle/

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

$(".fold_reply").click(function() { 
     var style=$('.reply').css('display');
    if (style=='none') {
        $(".reply").show(500);
    }
    else {
        $(".reply").hide(500);
    }

});​

<input type="button" class='fold_reply' value="button">

<div class='reply'>
    text<br/>text<br/>text<br/>text<br/>text
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

Working Demo