Manchester Web Design Web Design & SEO Manchester Web Design Portfolio Get a Free Quote

We are an affordable and professional
Web Design & SEO company in Manchester.

Simple jQuery: Hide/Show elements with .toggle() and .slidetoggle()

The .toggle() and .slideToggle() functions in jQuery are great tools for hiding and displaying information on your websites. Here is a quick guide to the basics of each function with code and examples.

Include jQuery in your page
A simple way to include jQuery is to use a version hosted by Google at Google Libraries API. Copy the ‘path:’ entry (which is a link to the latest version of jQuery) into the head of your HTML page. Also you create the jQuery onload() function below to add your functions.

<html>
    <head>
        <title>Simple jQuery: Hide/Show divs with .toggle() and .slidetoggle()</title>

        <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(function() {
		    // jQuery functions go here.
		});
	</script>
    </head>
    <body>
    </body>
</html>

Example 1 – A Simple Div Toggle
The simplest way to use the .toggle() function is to turn an element on and off using the following code. The div is hidden initially with the inline CSS ‘style=”display:none;”‘.

The jQuery function

$('#toggle1').click(function() {
	$('.toggle1').toggle();
	return false;
});

The HTML code

<a href="#" id="toggle1">Simple Div Toggle</a><br /><br />
<div class="toggle1" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

The jQuery function applies the toggle behaviour to the div (with class ‘toggle1′) which is activated when the link (with id ‘toggle1′) is clicked. The line return false; overrides the standard behavior of the ‘a’ tag and stops the browser returning to the top of the page when clicked. Try it out below:

Simple Div Toggle

Example 2 – Switching Elements with Toggles
Sometimes you may want to switch between two elements or paragraphs on a page. You can achieve this simply by applying a toggle to BOTH elements.

The jQuery function

$('#toggle2').click(function() {
	$('.toggle2').toggle();
	return false;
});

The HTML code

<a href="#" id="toggle2">Switch Text Toggle</a><br />
<p class="toggle2">I'm visible on load!</p>
<p class="toggle2" style="display:none;">I'm hidden on load!</p>

This time the function is applied to toggle BOTH ‘p’ elements but controlled from the same link. By hiding one element when the page is loaded, the switching effect is achieved by hiding the visible element and showing the hidden element with a single click. Try it out below:

Switch Text Toggle

I’m visible on load!

Example 3 – Toggle with Animation
jQuery has standard transitional animations included and by adding a duration to your toggle function you can make a hidden element appear with an animated effect.

The jQuery function

$('#toggle3').click(function() {
	$('.toggle3').toggle('slow');
	return false;
});

The HTML code

<a href="#" id="toggle3">Animated Toggle</a><br /><br />
<div class="toggle3" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

The jQuery function is almost exactly the same as Example 1 but with the addition of a duration. jQuery has 3 standard durations, ‘slow’, ‘normal’ and ‘fast’, built in but you can also specify a number of milliseconds to further customise your script. Remember not to surround these values with quotes in your code. Try it out below:


Animated Toggle

Example 4 – Toggle with the .slideToggle() function
The slide toggle can be called in the same way as the standard toggle function but, unlike .toggle(), the slideToggle is always animated. Also, rather than expanding from the top left corner as .toggle() does, .slideToggle() slides the element down to it’s defined height over the course of the animation but is always the same width.

The jQuery function

$('#toggle4').click(function() {
	$('.toggle4').slideToggle('fast');
	return false;
});

The HTML code

<a href="#" id="toggle4">Slide Toggle</a><br /><br />
<div class="toggle4" style="display:none; background-color:#4CF;width:100px;height:200px;"></div>

In this example the duration is set to ‘fast’ and, when the toggle link is clicked, the element will slide in with a width of 100 pixels (as defined in the CSS of the element). This technique is helpful for having boxes drop in from the top of a page, or as part of an accordion effect. Try it out below:


Slide Toggle

If you want to you can check out all the examples in one page.

This entry was posted in Web Design Tutorials, Web Development, Web Sites and tagged , , , , . Bookmark the permalink.

One Response to Simple jQuery: Hide/Show elements with .toggle() and .slidetoggle()

  1. Pingback: Tweets that mention Simple jQuery: Hide/Show elements with .toggle() and .slidetoggle() | Rija Media Blog -- Topsy.com

A Rija Group site

Switch to our mobile site