JQuery: More / Less Slides?

Question

After simply switching the slides to get a more detailed link, when you expanded the read less link.

Just like this , but it needs to slide, not just look like that.

The initial height must also be specified using words or the height of the window.

Any ideas this is pretty easy to achieve?

Thanks for any help :)

Answer 1

It is simple but effective.

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

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

Answer 2

Late, but never, I find this plugin very useful. It has many great options and is very flexible.

http://plugins.learningjquery.com/expander/

Answer 3

@here http://www.w3schools.com/jquery/eff_slidetoggle.asp

Answer 4

, , toggle(), (display: block/hidden) - .

You should use the slideToggle () function, which does the same, but with a sliding effect.

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

Answer 5

you can use jquery built in functions for .slide () or animate ()

so instead of using:

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

to try

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

you need to first hide (i.e. show: none) the content area. maybe wrap the contents in a div with id / class and set to display: none