I am currently attempting to expand the size of a div with one button click and then reduce it to 0 in the same click. I've tried a few things, but I've put the most recent attempt into this jsfiddle. Can anyone possibly point me in the right direction on why the div while neither expand or shrink?

Here is the code for the recent attempt along with the CSS, and HTML.

$("dasButton").toggle(function(){
$("#div1").height($("#div1").height()+200);
},function(){
$("#div1").height($("#div1").height()-200);

});

});

CSS

#div1{
background-color:#8888ff;
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
 }

HTML

<input type="submit" class="toggle_div" id="dasButton" value="Enlarge/Shrink div"/><br>
<div id="div1">
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
}

/

I am currently attempting to expand the size of a div with one button click and then reduce it to 0 in the same click. I've tried a few things, but I've put the most recent attempt into this jsfiddle. Can anyone possibly point me in the right direction on why the div while neither expand or shrink?

Here is the code for the recent attempt along with the CSS, and HTML.

$("dasButton").toggle(function(){
$("#div1").height($("#div1").height()+200);
},function(){
$("#div1").height($("#div1").height()-200);

});

});

CSS

#div1{
background-color:#8888ff;
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
 }

HTML

<input type="submit" class="toggle_div" id="dasButton" value="Enlarge/Shrink div"/><br>
<div id="div1">
display:block;
height:0px;
overflow:hidden;
    border: 1px solid #000;
}

http://jsfiddle/sen3t6vk/3/

• javascript
• jquery
• html
• css

4 Answers 4

i change your code!

jQuery:

$("#dasButton").click(function(){
    var inputValue=$("#dasButton").attr('value');

    if(inputValue=="Expand")
    {
        $("#div1").animate({height:"200px"});
        $("#dasButton").attr('value','Reduce');
    }
    else if(inputValue=="Reduce")
    {
        $("#div1").animate({height:"0px"});
        $("#dasButton").attr('value','Expand');
    }
});

HTML:

<input type="submit" class="toggle_div" id="dasButton" value="Expand"/><br>
<div id="div1">

Live Demo on JSFiddle

The .toggle() event was removed from jQuery 1.9. However, if you use an older version, and fix your jQuery errors, it works fine:

jsFiddle example

$("#dasButton").toggle(function () {
    $("#div1").height($("#div1").height() + 200);
}, function () {
    $("#div1").height($("#div1").height() - 200);
});

toggle() function does not allow you to write a function in it, it only takes speed (int).

may be you can write something like this

$("#dasButton").click(function (e) {
                var wdth = $("#div1").width();
                if (wdth > 0) {
                    $("#div1").width(0);
                    $("#div1").height(0);
                }
                else {
                    $("#div1").width(200);
                    $("#div1").height(200);
                }
            });

Small and precise:

$("input").click(function () {
    var div = $("#div1");
    div.height(div.height()==200 ? 0 : 200);
})

Demonstration