Jquery & CSS3 Accordion Tutorial | Alex Thorpe
 

Jquery & CSS3 Accordion Tutorial

Final Product

This is an iframe of a live site. If it is not working for you, click the button for the live preview.
Live Demo Download

Intro

This tutorial will focus on creating a stylish accordion for your website. No prior knowledge of web development is required to follow this tutorial. Before we begin it is important to define what we will accomplish when finished:

Goals

  • Work on any device
  • Work with any html content
  • Scale to width of the parent container
  • Include visual clues so the user knows what to do
  • Degrade gracefully for older browsers
  • Modify and expand easily

Now that we have the the requirements defined lets get started.

Tutorial

The first step is to create a folder for your project and another folder inside it called ‘img’. Next, download the images from the link bellow and copy them into the img folder. We will use these later to indicate to the user that there is more content available in our accordion.

Download Images

Finally add an “index.html” file inside the main project folder. Open the HTML file and add the following code:

<!DOCTYPE html>
<html>
	<head>
		<title>Jquery Accordion Demo</title>
	</head>
	<body>
	</body>
</html>

This will give you the basic structure of an html5 page. If you were to open the webpage in a browser you would see nothing so lets add some content to fix that. Add the following new code in-between the ‘body’ tags like so:

<body>
	<h1>Jquery Accordion</h1>
	<div class="accordion">
		<h3>Option 1</h3>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
		</div>

		<h3>Option 2</h3>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
		</div>

		<h3>Option 3</h3>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
		</div>

		<h3>Option 4</h3>
		<div>
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nisl erat, consequat non ultrices ut, pharetra vel lectus. Donec non felis diam, at tempus felis. Nulla et euismod felis. Sed ut suscipit eros.
		</div>
	</div>
</body>

Now if you open the page in a browser you will see this:

We added a parent div with a class ‘accordion’ and inside it we placed a series of ‘h3’ titles followed by ‘div’ tags with the content will want to hide.

To dress up our titles we will add a little style with an external stylesheet. Start by creating a new file in the folder called style.css and open it in your text editor. Add the following code to that file.

.accordion {
	width: 100%;
	margin: 1em 0em;
}

.accordion h3 {
	background: url(img/plus.png) no-repeat right center #F6F6F6;
    border: 1px solid #EEEEEE;
    color: #3777AF;
    display: block;
    //font-size: 1.5em;
    //font-weight: bold;
    margin: -1px 0 0 !important;
    padding: 0.5em 1em;
    -moz-transition: all 0.3s ease-in-out 0s;
    -webkit-transition: all 0.3s ease-in-out 0s;
    -o-transition: all 0.3s ease-in-out 0s;
    transition: all 0.3s ease-in-out 0s;
}

.accordion p {
	font-size: 1.2em;
	line-height: 1.4em;
	padding: 10px;
}

.accordion h3.active {
	background: url(img/delete.png) no-repeat right center #ffffff;
}

.accordion h3:hover {
	background-color: #ffffff;
	color: #5999CF;
	border: 1px solid #EEEEEE;
	cursor: pointer;
}

.accordion div {
	padding: .5em .25em;
}

This code better defines the clickable area of our titles, and when you hover over them a slight color change will happen indicating to the user that you can click the area. Finally, we need to tell the webpage where to find these new style rules so add a new line of code the the index.html page in-between the ‘head’ tags.

<head>
	<title>Jquery Accordion Demo</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
</head>

If you view the page now it should look like this:

As you can see, the title areas are looking nice, but the content is still showing. We will now hide that using Jquery. First, we need to include the Jquery library in our page. Simply add a link to it on your index page between the ‘head’ tags.

<head>
	<title>Jquery Accordion Demo</title>
	<link rel="stylesheet" type="text/css" href="style.css" />
	<script src="http://code.jquery.com/jquery-1.7.1.min.js">
</head>

You will not see any changes to your page yet because we have not done anything to apply the Jquery to our elements, we have only made it available for use.

The final bit of code we need to add is the following script right under the Jquery library we just added:

<script>
$(document).ready(function() {
	$('.accordion:eq(0)> div').hide();
	$('.accordion:eq(0)> h3').click(function() {
           $(this).next().slideToggle('fast');
           $(this).toggleClass('active');
        });
});
</script>

This code takes the content inside the div tags and hides it. Then when you click on an h3 title it makes the content bellow visible. To let the user know that the content is showing, we add the class ‘active’ to the h3 title that was clicked. This changes the plus sign to a negative sign as defined in our style sheet.

If you did everything correctly, you should now have a working accordion menu. You can easily change the look of the different elements in the css file and you can speed up or slow down the showing of content by editing the $(this).next().slideToggle(‘fast’); section of code. Try changing the ‘fast’ to ‘slow’ if you want a longer reveal.

I hope you enjoyed the tutorial. Let me know in the comments if there are other effects you want me to cover in the future.

2 Comments on "Jquery & CSS3 Accordion Tutorial"

  1. Adrian says:

    Is there any way to close current open elements, when clicking on one? Meaning… only one area open at a time and all others close themselves.

    Thanks!

Got something to say? Go for it!

 
Read previous post:
Mobile Device Policy & Development in Enterprise

As mobile devices become more powerful and ubiquitous in the workplace companies need to begin supporting and developing for these...

Close