Key Concepts

Review core concepts you need to learn to master this subject

jquery slideToggle method

jquery fadeIn effect method

jquery fadeOut effect method

jquery show effect

jquery toggle effect

jquery effects

jquery fadeToggle method

jquery slideUp method

See more

jquery slideToggle method

// The '#menu' element will alternate between 
// gradually sliding down and gradually sliding up 
// every time the '#menu-button' is clicked.
$('#menu-button').on('click', () => {
  $('#menu').slideToggle();
});

The jQuery .slideToggle() effect method combines the effects of the .slideDown() and .slideUp() methods. This causes the element to alternate between gradually appearing by sliding down and gradually disappearing by sliding up every time the event listener is triggered.

The .slideToggle() method takes an optional parameter that specifies the duration of the effect. If not specified, the default value is 400 milliseconds.

Learn jQuery: Effects
Lesson 1 of 1
  1. 1
    Introduction
    jQuery Effects are a group of methods in the jQuery library that are responsible for adding dynamic behavior to websites. You may have seen many of these effects on modern websites without even rea…
    Start
  2. 2
    .hide()
    The first tool you will add to your jQuery effects tool belt is the .hide() method. When you hide an element, your browser will render the HTML as if the hidden element does not exist. It will disa…
    Start
  3. 3
    .show()
    Now that we’ve learned how to hide elements on our page, we want to know how to make them reappear. Luckily, the .show() method does the opposite of .hide(). If an element on your page is hidden, …
    Start
  4. 4
    .toggle()
    Great work! Our table now has two buttons that hide and show our image. But wouldn’t it be nice to have one button do both? It is common for web pages to have one button that will either hide or sh…
    Start
  5. 5
    fading
    Great work! In this exercise, you will learn about two new methods that are similar to .hide() and .show(). Take a look at the gif below: In this gif, the .fadeIn() method is called on an HTM…
    Start
  6. 6
    .fadeToggle()
    Great work! With fade, our website is starting to look dynamic. .fadeToggle() is the third and final method in this trio of fade methods. This method is similar to .toggle(). If you call .fadeToggl…
    Start
  7. 7
    Sliding
    Have you ever been to a website and seen HTML elements slide into place? Many websites use this effect to show menus; you click on your profile image and a menu slides down revealing different sett…
    Start
  8. 8
    Review: Effects
    Wow! You’ve completed this table of 9 different jQuery effects. Great job! To review, the methods that we learned were: * .hide() * .show() * .toggle() These methods instantly hide or show eleme…
    Start

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo