JavaScript
Article

jQuery Slide Element Up/Toggle Up

By Sam Deering

Simple jQuery code snippet to slide page elements up or toggle up using jquery.slideToggle(). The difference is that jQuey’s slideUp() function is primarily used to slide elements out of view and then use slideDown() to make them reappear whereas jQuery’s toggleUp() function provide both this functionality within the same function call binded to the element.

SlideUp Example

$('#clickme').click(function() {
  $('#book').slideUp('slow', function() {
    // Animation complete.
  });
});

http://api.jquery.com/slideUp/

SlideToggle Example

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

http://api.jquery.com/slideToggle/

Demo

http://www.learningjquery.com/2009/02/slide-elements-in-different-directions

No Reader comments

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in JavaScript, once a week, for free.