CODEWITHSUNDEEP
jqueryhtmlresize
Miles
Miles

Reputation: 21

jQuery - Change height of Div on button click

I've searched this site for awhile and can't find a solution to my problem. Basically I have an unordered list jQuery drop down menu inside a Div and the menu which is being pulled dynamically can be too long for the page so I want to limit the width of the div so the menu is forced to a second line.

All I need the jQuery to do is animate the size of the div from 36px to 72px when a View More button is clicked.

Just a basic example:

<a href="#" id="button">View More</a>

<div class="container">
  <ul id="nav">
    <li>Option 1
     <ul><li>Sub Option 1</li></ul>
    </li>

and so on.

Any help would be greatly appreciated.

Thanks.

Upvotes: 2

Views: 52530

Answers (2)

Brombomb
Brombomb

Reputation: 7086

$("#button").click(function(){
  $(".container").animate({
    height: "72px"
  }, 1500 ); // how long the animation should be
});

Upvotes: 5

JohnP
JohnP

Reputation: 50029

.animate() is what you're looking for : http://api.jquery.com/animate/

#cont {
    border: 1px solid #000;
    height: 36px;
    overflow:hidden;
}
<a href="#" id="button">View More</a>
<a href="#" id="button2">View Even More</a>
<div id='cont'>
    <ul>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>
        <li>an item</li>

    </ul>
</div>

$('#button').click(function(){
    $('#cont').animate({height:'72px'}, 500);
    //this method increases the height to 72px
});

$('#button2').click(function(){
    $('#cont').animate({height: '+=36'}, 500);
    //This method keeps increasing the height by 36px
});

EDIT

Live fiddle here http://jsfiddle.net/jomanlk/JJh9z/1/

Upvotes: 19

Related Questions