Question

How can i make the div expand when there is lots of content within it?

HTML:

<div class ="content">
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
    this is a test <br />
</div><br />
<div class="click-here">Click here to see more</div>

CSS:

div.content
{
    height:100px;
    width:300px;
    border:1px solid red;
    overflow:hidden;
}

div.click-here
{
    border:1px solid green;
    width:200px;
}

Here is my example: http://jsfiddle.net/nvCvy/1/

Jquery or CSS?

Would a jquery scroll be a better solution? or would you display everything using css?

Answer 1

If the expansion would be height only and be on click of the button you could do:

​$('.click-here').click(function() { 
    $('.content').css('height', 'auto');
});​​​​​​​​​​​​​​​

http://jsfiddle.net/nvCvy/3/