Cacher is the code snippet organizer for pro developers

http://jsfiddle.net/9EFNK/1573/


<div id="box">

       <div class="open">More Details</div>
       <div class="showpanel">
          This is content
       </div>

</div>


$(document).ready(function(){
    $('.open').click(function(){
    
       $('.showpanel').slideToggle('slow');
       if($(this).text() == 'Less Details')
       {
           $(this).text('More Details');
       }
       else
       {
           $(this).text('Less Details');
       }
   });
    

});


#box{
    border:2px solid #000;
    width:500px;
    min-height:300px;
    
}
.open {
    width:450px;
    height:50px;
    background:blue;
    margin:5px auto 0 auto;
    color:#fff;
    

    
    }
.showpanel{
    width:450px;
    height:300px;
    margin:0 auto 10px auto;
    background:red;
    display:none;

}