Accordion Content With jQuery - Simple and Effective

by: Preston Schmidt

Using jQuery Does Awesome Things

Accordion - Makes Life Simpler

Sometimes you have a lot of content on a page that needs to be kept under control so users can navigate and find what they are looking for quickly and easily. Sometimes your design calls for content to act a certain way or look a certain way to maintain constancy on your website.

Creating an accordion function on your page is a great way to do this and more. All that is necessary is writing your markup a certain way, and then with a little bit of client side script, letting jQuery do the heavy lifting for you.

Simple Markup That Lends Great Usability

Let's take a look at the markup. It starts off with an h2 that has a class, followed by a div with another class. Simple, right?

<h2 class="accordion-heading">My Title</h2>
<div class="accordion-content">
     //put anything you want in here... headings, images, text, other divs....
</div>

What we are going to do is tell jQuery to look for any h2's with the class "accordion-heading", and then find any div after them with the class "accordion-content" and then hide those divs on page load.

Let's take a look at the script...

<script>
	$(function () {
	    $('.accordion-content').hide();
	    $("h2.accordion-heading").click(function () {
		   $(this).next(".accordion-content").slideToggle("slow").siblings(".accordion-content:visible").slideUp("slow");
		   $(this).toggleClass("current");
		   $(this).siblings("h2.accordion-heading").removeClass("current");
	    });
	});
</script>

Obviously we've created a function, as we should do in good programming! First, anything with the class "accordion-content" is found and hidden with the jQuery .hide();. Second, we are attaching a click function to any and all h2's with a class of "accordion-heading".

Digging Deeper...

Let's look closer at that first line inside the .click function...

$(this).next(".accordion-content").slideToggle("slow").siblings(".accordion-content:visible").slideUp("slow");

$(this) refers to the h2.accordion-heading that we've attached the .click function to. The .next('.accordion-content') is just saying find the "next" element of the DOM that is a div with the class "accordion-content". The .slideToggle("slow") is a bit of jQuery magic that will allow the initially hidden content to slide into view, and we've passed it a value of "slow"... you could say fast or even nothing at all. Now the next part of the string is saying, any .siblings of $(this) that are of a class "accordion-content" and are :visible, go ahead and .slideUp(). So now when you click, you get whatever content is the next DOM element from that h2, and all other like elements slide up and get hidden.

Now the next two lines of code just add and remove a class named current. This is not necessary, but if you put that class in your stylesheet you can give a new look to the h2 you've clicked to make it pretty or something...

Don't forget to link to jQuery itself in your head. You'll need it!

HTML and jQuery Codes Together:

<script>
	$(function () {
	    $('.accordion-content').hide();
	    $("h2.accordion-heading").click(function () {
		   $(this).next(".accordion-content").slideToggle("slow").siblings(".accordion-content:visible").slideUp("slow");
		   $(this).toggleClass("current");
		   $(this).siblings("h2.accordion-heading").removeClass("current");
	    });
	});
</script>

<h2 class="accordion-heading">My Title</h2>
<div class="accordion-content">
     //put anything you want in here... headings, images, text, other divs....
</div>

Outlier

Video, Web, and Design Agency