CODEWITHSUNDEEP
jqueryheight
Adrengski
Adrengski

Reputation: 97

How do I toggle the height of a div

So I want a div (#more) to change its height from 105px to 25px once another div (#clck) was clicked. I kind of did it with:

 <script type="text/javascript">
$("#clck").click(function () {
$("#more").css("height", "325");
});
</script>

but after the first click, it doesn't go back to its initial height. I've tried toggleClass but it's not working.

Can anybody help me do this?

Upvotes: 1

Views: 1449

Answers (4)

dku.rajkumar
dku.rajkumar

Reputation: 18568

if you want to toogle the height in each click you can use a flag variable to remember the current height.

var flag = false;
$("#clck").click(function(){
    if(flag){
        $("#more").css("height", "325");
        flag = false;
    }
    else{
        $("#more").css("height", "105");
        flag = true;
    }
});

Upvotes: 1

Wasim Karani
Wasim Karani

Reputation: 8886

Check this out jsfiddle demo

$("#clck").click(function () {
    if($("#more").css("height")=="105px") // check for height
        $("#more").css("height", "325");
    else
        $("#more").css("height", "105");
});

Upvotes: 1

Hazza
Hazza

Reputation: 6581

Toggle height of div using jQuery. Could use .data() .removeData() with if/else, as this guy demonstrates simply

Upvotes: 1

Matthias
Matthias

Reputation: 12259

Try setting the height in a new CSS-class and toggle this class using toggleClass.

Example:
HTML:

<div id="myDiv">...</div>

CSS: 

#myDiv {
   height: 105px;
}

#myDiv.expanded {
   height: 325px
}

JS:

$("#myDiv").toggleClass("expanded");

Upvotes: 2

Related Questions