Saturday, December 4, 2010

JQUERY MORE LESS Button

In a blog we often see a more.. button. when clicked it shows the extended content. Let's see an example. Click on the read more link to see the effect.

Is it a illusion we are living in?May be we are in dream like in inception.Our memory fades away

The world has been mysterious.The nature of her has not been unveiled to human. we still wonder what we are?
are we real?Human has fantasized death and life after death for ages


Read more
Read less

Let's look at the javascript code

$('.selector p:eq(1)').hide();
$('a.less').hide();
$('a.more').click(function(){
$('.selector p:eq(1)').slideDown('slow');
$('a.more').hide();
$('a.less').fadeIn('slow');
return false;
});
$('a.less').click(function(){
$('.selector p:eq(1)').slideUp('slow');
$('a.less').hide();
$('a.more').fadeIn('slow');
return false;
});

Time to understand the code. You have already understood this! it's that simple. Enjoy jquery.

No comments:

Post a Comment