› Using jQuery’s Slide Toggle for Show/Hide Functionality

Using jQuery’s Slide Toggle for Show/Hide Functionality

The slideToggle() method can be used for opening and closing content

Email this to someoneShare on Facebook0Share on Google+1Share on LinkedIn0Share on Tumblr0Share on StumbleUpon0Tweet about this on TwitterShare on Reddit0Pin on Pinterest0

The jQuery .slideToggle() method provides an alternative show-hide behavior that combines the library’s .slideUp() and .slideDown() methods into one neat little package. It animates an element’s height and sets display: none; once the element reaches 0px. If the element is hidden on load, running .slideToggle() displays the element, and if it’s displayed on load, running it hides the element.

This method is handy for initiating basic show-hide behavior without the necessity of using either .show() or .hide(), and is one of the simpler ways to toggle between show and hide with jQuery.

Part I – Building the HTML

Let’s start with a basic HTML snippet to build the structure.

<button href="#">Button 1</button>
<section>
<h4>This is the first content block.</h4>
<p>First content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<br>
<button href="#">Button 2</button>
<section>
<h4>This is the second content block.</h4>
<p>Second content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<br>

This simple setup consists of two buttons, each with sections below them which store content. In this tutorial, we’ll use the .slideToggle() method to show and hide the content below each button.

Notice the br tags below each section. These are important, as we’ll use them to determine the cutoff point in jQuery.

Let’s give our HTML some classes to reference later:

<button href="#" class="toggle">Button 1</button>
<section class="toggleContent">
<h4>This is the first content block.</h4>
<p>First content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<br>
<button href="#" class="toggle">Button 2</button>
<section class="toggleContent">
<h4>This is the second content block.</h4>
<p>Second content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</section>
<br>

Now we’ve given the button elements a class of toggle and the underlying sections the class toggleContent, and we can proceed to the jQuery.

Part II – jQuery Magic

We’ll begin with a ready handler to make sure our code doesn’t execute until the DOM is loaded.

$( document ).ready(function() {
});

Now we can optionally run .hide() if we haven’t hidden our toggleContent section with CSS. If you you set toggleContent to display: none; using CSS, .hide() isn’t necessary.

$(document).ready(function () {
    $('.toggleContent').hide();
});

Note: If you aren’t using CSS to hide the section, remember that .hide() doesn’t run until the DOM is loaded, which means your content could be visible for a flash upon the page load.

Now we’ll add a .click() handler to the .toggle button class, to which we’ll bind the code to toggle the display on or off. This code executes when the described element is clicked.

$(document).ready(function () {
    $('toggleContent').hide();
    $('button.toggle').click(function () {
    });
});

Now we’ll add the code to execute when .click() runs. This part runs .slideToggle() on the element and uses the .nextUntil() selector to tell jQuery the cutoff section for the hidden content, which is in our case is the br tag beneath each section:

$(document).ready(function () {
    $('.toggleContent').hide();
    $('button.toggle').click(function () {
        $(this).nextUntil('br').slideToggle();
    });
});

Part III – Putting it all Together

At this point, we should have functional, albeit unstyled code. Let’s look at it all together. Notice the call to jQuery in the section, which must take place to use the jQuery library and the code in this tutorial.

<html>
<head>
<title>Show-Hide Functionality with jQuery</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
</head>

<body>
<article>
	<button href="#" class="toggle">Button 1</button>
	<section class="toggleContent">
		<h4>This is the first content block.</h4>
		<p>First content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</section>
	<br>
	<button href="#" class="toggle">Button 2</button>
	<section class="toggleContent">
		<h4>This is the second content block.</h4>
		<p>Second content block text. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
	</section>
	<br>
</article>
<script>
$(document).ready(function () {
    $('.toggleContent').hide();
    $('button.toggle').click(function () {
        $(this).nextUntil('br').slideToggle();
    });
});
</script>
</body>
</html>

Check out the working example I’ve set up at JSFiddle.

Part IV – Advanced Usage and Troubleshooting

The .slideToggle() accepts three parameters which you can use to further customize your code: duration, easing and a completion callback (we won’t cover the latter in this tutorial).

The first, duration, tells jQuery how long the process should run. The default is 400ms. If you wish to slow down the animation, you could try something like this, which slows it down to 1000ms:

.slideToggle (1000);

Strings like “slow” and “fast” will also work in place of the integer.

The easing parameter controls how the animation moves at various points in the process. The default value is “swing,” in which the animation runs faster at the beginning and end of the process. “Linear” means the animation runs consistently throughout.

Other easing functions are available with jQuery plugins.

WordPress Users: Remember that jQuery in WordPress is loaded in no-conflict mode by default, which means jQuery relinquishes control of $, which, in jQuery, is shorthand for jQuery. So if you’re running a default WP installation, you’ll probably need to replace $ with jQuery.

If you’re having difficulty with your code, try setting up a JSFiddle or opening the browser JS console to look for hints about what’s going wrong, or comment below and I will try to help out as needed.

Subscribe for weekly tutorials


  • Baron Berooyd van Zuypesteijn

    Is there any disadvantage to putting the toggle snippet in an external Javascript file, loaded after jQuery?