jQuery: Read More/Less Slide Toggle?

Question

I'm after a simple slide toggle for a read more link then when expanded a read less link.

Exactly like this but needs to slide down rather than just appear like that.

The initial height needs to be set as well whether through words or box height.

Any ideas, is it fairly simple to achieve?

Thanks for any help :)

Answer 1

It's simple, yet effective.

$(".button").click(function(){
  var moreAndLess = $("p").is(':visible') ? 'More' : 'Less';
  $(this).text(moreAndLess);

  $("p").slideToggle();
});

Answer 2

The example you mentioned use toggle() function, which just shows or hides the element (display: block / hidden) without any effect.

You have to use slideToggle() function, which does the same thing, but with sliding effect.

$("button").click(function(){
  $("p").slideToggle();
});