Simple Accordion w/ CSS and jQuery

Simple Accordion w/ CSS and jQuery

Tags: Beginner, Widgets

Please note: This tutorial requires basic knowledge of CSS and jQuery. For best results, please be sure to learn the proper foundations before attempting to take this tutorial. Learn one step at a time :-)

When designed and implemented with usability in mind, the accordion can be incredibly useful when organizing a good chunk of content. Since a lot of people found my toggle tutorial useful, I would like to go over how I approached building an accordion from scratch.

View Demo

Foundation – HTML

Our markup is pretty simple, an <h2> and <div class="acc_container"> following right after. The <h2> is the heading of our accordion item. We will be using this as our trigger w/ jQuery. The <div class="acc_container"> is what will be sliding up and down to show its content.

<h2 class="acc_trigger"><a href="#">Web Design &amp; Development</a></h2>
<div class="acc_container">
    <div class="block">
 <!--Content Goes Here-->
    </div>
</div>

Styling – CSS

There are two important parts to pay special attention to in the styles.

1. Fixed width on the .acc_container (Cannot be in % or em). This prevents an unusual jQuery bug where it jumps/skips when the accordion is sliding down (right when it reaches the bottom). I’ve researched this and some suggested specifying a height with jQuery, but I found my solution to be much more simple and effective.
2. Add padding to the nested div in the .acc_container. This prevents another bug where the padding is animated when the accordion is in opening/closing.

h2.acc_trigger {
 padding: 0; margin: 0 0 5px 0;
 background: url(h2_trigger_a.gif) no-repeat;
 height: 46px; line-height: 46px;
 width: 500px;
 font-size: 2em;
 font-weight: normal;
 float: left;
}
h2.acc_trigger a {
 color: #fff;
 text-decoration: none;
 display: block;
 padding: 0 0 0 50px;
}
h2.acc_trigger a:hover {
 color: #ccc;
}
h2.active {background-position: left bottom;}
.acc_container {
 margin: 0 0 5px; padding: 0;
 overflow: hidden;
 font-size: 1.2em;
 width: 500px;
 clear: both;
 background: #f0f0f0;
 border: 1px solid #d6d6d6;
 -webkit-border-bottom-right-radius: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -moz-border-radius-bottomright: 5px;
 -moz-border-radius-bottomleft: 5px;
 border-bottom-right-radius: 5px;
 border-bottom-left-radius: 5px;
}
.acc_container .block {
 padding: 20px;
}

Step 3. Setting up jQuery

For those who are not familiar with jQuery, do check out their site first and get an overview of how it works. I’ve shared a few tricks that I have picked up along the way, you can check those out as well.
Initial Step – Call the jQuery file
You can choose to download the file from the jQuery site, or you can use this one hosted on Google.

<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

Directly after the line where you called your jQuery, start a new <script> tag and start your code by using the $(document).ready event. This allows your jQuery code to run the instant the DOM is ready to be manipulated. The code you will be writing in the next few steps will all take place within.

$(document).ready(function() {
 //Code goes here
});

Bringing it to Life – jQuery

The following script contains comments explaining which jQuery actions are being performed.

//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
$('.acc_trigger:first').addClass('active').next().show(); //Add "active" class to first trigger, then show/open the immediate next container

//On Click
$('.acc_trigger').click(function(){
 if( $(this).next().is(':hidden') ) { //If immediate next container is closed...
  $('.acc_trigger').removeClass('active').next().slideUp(); //Remove all "active" state and slide up the immediate next container
  $(this).toggleClass('active').next().slideDown(); //Add "active" state to clicked trigger and slide down the immediate next container
 }
 return false; //Prevent the browser jump to the link anchor
});

The Logic – What’s Happening Here?

1. First set the default settings: Open first accordion and add active state.
2. On click: Find out if the clicked accordion item is opened or closed.
3. If clicked item is “hidden” (closed) then…
4. On all accordion items – Remove all “active” classes and slide up (close) all immediate next .acc_container.
5. On clicked trigger $(this) – Add “active” state and slide down the immediate next .acc_container.

Related Articles Elsewhere