javascript or jquery, Click on a link and expand a div

Question

I have been looking a js/jquery solution on the net and stackoverflow for a div that has a set height (example 20px;) and after the user clicks [read more] it opens to a height of auto or 150px; (full content)

Example:

<style>
.small  {height: 20px;}
.big    {height: auto;}
</style>


<div class="small">
    <p>Lorenter code hereem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris
    nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet,
    consectetur adipisicing elit, sed do eiusmod tempor incididunt
    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat.</p>
    <a href="#">Click to read more</a>
</div>

Thanks for the help.

EDIT: Ive tried this:

In the href: onclick="javascript:toggleContent(this, true);"

Along with this:

<script type='text/javascript'>
$(window).load(function(){
comment_reply = function (id){

   var e = $(id);
   e.toggle();
}
}); 
</script>

The problem with that is the div expands on click rather than an [a href] I hope thats clear.

Answer 1

Just to expand DIV, you can use following code:

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    $(this).closest('.wrapper').find('.small').toggleClass('small big');
});

Where wrapper is used to let link being displayed

DEMO

UPDATED code

To make it collapse too:

DEMO

$('.wrapper').find('a[href="#"]').on('click', function (e) {
    e.preventDefault();
    this.expand = !this.expand;
    $(this).text(this.expand?"Click to collapse":"Click to read more");
    $(this).closest('.wrapper').find('.small, .big').toggleClass('small big');
});

Answer 2

Something like that... could be optimised...

$(document).ready(function(){
    $(document).on('click', '.small a', function(){
        $('.small').addClass('big');
        $('.small').removeClass('small');
    });
    $(document).on('click', '.big a', function(){
        $('.big').addClass('small');
        $('.big').removeClass('big');
    });
});

Answer 3

Try this

CSS

.text.short {
    height: 50px;
    overflow: hidden;
}
.text.full {

}
.read-more {
    cursor: pointer;
    display: inline-block;    
    font-weight: bold;
    padding: 3px;
    background-color: #06c;
    color: white;
    margin: 2px;
}

Script

$(document).ready(function(){    
    $(".read-more").click(function(){        
        var $elem = $(this).parent().find(".text");
        if($elem.hasClass("short"))
        {
            $elem.removeClass("short").addClass("full");        
        }
        else
        {
            $elem.removeClass("full").addClass("short");        
        }       
    });
});

DEMO

Answer 4

Try this JSFiddle: http://jsfiddle.net/RPBBg/

What you need is a toggler div

<div id="toggle" onclick="$('.small').css('height','auto');">Click to read more</div>