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 :)

Why you don't try to follow the tutorial you linked and change toggle() by slideToggle()? — Miquel, Jan 13 '12 at 11:30

score 5 · Answer 1 · edited May 09 '13 at 17:03

5

It's simple, yet effective.

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

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

edited May 09 '13 at 17:03

answered Dec 12 '12 at 05:22

Christopher

score 1 · Answer 2 · answered Jan 13 '12 at 11:42

1

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();
});

answered Jan 13 '12 at 11:42

Lubor Bílek

Thanks guys, i need the 'read more' to change to 'read less' i have found some examples of click slide up and down but need that to change really. – Jezthomp Jan 13 '12 at 13:24

score 0 · Answer 3 · answered Jan 13 '12 at 11:46

you could use jquery's built in functions to .slide() or animate()

so instead of using:

$('#someElement').html('some content');

try

$('#someElement').html('some content').slideDown(some speed ie 600);

you'd need to hide (ie display:none) the content area first. maybe wrap the content in a div with a id/class and set that to display:none

3 Answers3