How to increase or decrease height of an element by clicking another element

1. Create a div which holds the main container

<div id= "main">
//This is your main container
</div>

2. Create a div which holds the content and place it in the main div like below

<div id = "main ">
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
</div>

3. Now, create another div which will have a button to control the div with content. In my case I am calling it as "footer" and place it in the main div

after placing the footer div the whole  html code should look like this

<div id= "main">
  
    <div id = "content">
        <p> My content line 1</p>
        <p> My content line 2</p>
        <p> My Content line 3</p>
    </div>
    <div id = "footer">
        Footer
        <button id = "btn">Button</button>
    </div>
  
</div>

And the css for these elements is 

html,body {
   height:100%
}
 
# main{
    min-height:100px;
    border:1px solid grey;
    height:100%;
}
#content {
    border:1px solid black;
    display:block;
    overflow:hidden;
    overflow-y: scroll;
}
#footer {
    border: 1px solid blue;
    display:block;
    //If you want to place your footer at the bottom and not to move it
    bottom:-10px;
    position:absolute;
}

NOTE : If you do not wish to move your bottom 

 
 I have used jquery, so I am going to use click function from jquery to handle click events on the footer button that we have created in step 3.

 And also change the height of the content element with jquery css function

 
$(function () {

    $('#btn').click(function(){
   
        $('#content').css("height", "100px");
    });
   
})
In this example I created only one button with handles reduces the height of the "content" div.
You can add another button to increase the height of the content div/element.






If you want some smoother action, you can use jquery animate https://api.jquery.com/animate/   like this



 
 
$(function () {

    $('#btn').click(function(){
    
        $('#content').animate({
            height:"20px"
        }, 2000);
    });
    
})






 



Here is the fiddle http://jsfiddle.net/mannemvamsi/DYZr5/4/