Question

I am having trouble with jquery expand and collapse.

I am planning to have a read more function over my site and i want to make use of this example.

http://www.designgala.com/demos/collapse-expand-jquery.html

if you could see clicking the header expands the content and clicking twice gives a result of minimizing but my issue here is to show some part of the content like 30px height from the div and when the header is clicked it would expand and show the whole content.

Answer 1

I created a jsfiddle which shows a way to do what you are looking to do.

http://jsfiddle.net/cSvAB/2/

Here is the javascript:

$( '.section' ).each( function( index, value ){

    $( value ).data( 'height', $( this ).height() );
    $( value ).css( {height: 30} );
});

$( '.section .header' ).click( function(){

    if( $( this ).data( 'expanded' ) ){

      $( this ).parent().animate( {height: 30} );
      $( this ).data( 'expanded', false );
    }else{

      $( this ).parent( ).animate( {height: $( this ).parent().data( 'height' )} );
      $( this ).data( 'expanded', true );
    }
});

and here is the HTML:

<div class="section">
  <div class="header">Click to read more</div>
  <div>Lots of text here</div>
</div>

<div class="section">
  <div class="header">Click to read more</div>
  <div>Lots of text here</div>
</div>

The only other important thing is that .section is given the css attribute overflow: hidden;

.section{ overflow: hidden; }