CODEWITHSUNDEEP
javascriptjqueryhtmlcssfold
urjit on rails
urjit on rails

Reputation: 1893

fold div on click

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

Upvotes: 4

Views: 11485

Answers (5)

Ankit Saxena
Ankit Saxena

Reputation: 2319

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

});​

Upvotes: 5

charlietfl
charlietfl

Reputation: 171690

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

Upvotes: 1

Sibu
Sibu

Reputation: 4617

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

Upvotes: 0

Levi Botelho
Levi Botelho

Reputation: 25214

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

Upvotes: 6

Gabriele Petrioli
Gabriele Petrioli

Reputation: 196187

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') )

Upvotes: 4

Related Questions