Accordion is a nice user interface useful of hiding and showing contents associated with an item. The content can be stretched or expanded, depends on the configuration or how the accordion is built.

This functionality is suitable for vertically stacked items. It is also a good alternative to tabbed contents for narrow spaces like sidebars.

It is very easy to achieve such functionality specially if you have a deep understanding of JavaScript or jQuery. If you feel that you are not good enough to make your own then this tutorial is for you.

Today ill show you how to make a simple accordion using jQuery.

The HTML

I use an unordered  list as you can see in the markup below. The anchor tags will serve as the clickable area. The div tags will serve as the containers of each content associated to the anchors.

<ul class="accordion">
	<li class="active">
		<a href="#">Section Title</a>
		<div>
			<!--
			Content associated to Section Title
			...
			-->
		</div>
	</li>
	<li>
		<a href="#">Another Section Title</a>
		<div>
			<!--
			Content associated to Another Section Title
			...
			-->
		</div>
	</li>
	<!-- more lists -->
</ul>

The CSS

The CSS below is responsible for the visual appearance.

.accordion {
	list-style: none;
	margin: 0;
	padding: 0;
}
.accordion > li > a:hover,
.accordion > li.active > a {
	background: tomato;
	color: #ffffff;
}
.accordion > li > a {
	display: block;
	text-decoration: none;
	padding: 10px 10px;
	background: #d5d5d5;
	color: #333333;
	border-radius: 2px;
	transition: all 200ms ease-in-out;
	margin-bottom: 5px;
}
.accordion > li > div {
	display: none;
	background: rgba(255,255,255,0.25);
	border-radius: 2px;
	margin: 0 0 5px;
}

To explain the code above, first i removed the list style of the unordered list. Then I removed the padding and margin by setting each value to 0.

.accordion {
    list-style: none;
    margin: 0;
    padding: 0;
}

After that, I added a couple of styles to the anchor and to its hover state.

.accordion > li > a:hover,
.accordion > li.active > a {
    background: tomato;
    color: #ffffff;
}
.accordion > li > a {
    display: block;
    text-decoration: none;
    padding: 10px 10px;
    background: #d5d5d5;
    color: #333333;
    border-radius: 2px;
    transition: all 200ms ease-in-out;
    margin-bottom: 5px;
}

Finally, I added a few styles to the div and set the display property to none to hide them by default.

.accordion > li > div {
    display: none;
    background: rgba(255,255,255,0.25);
    border-radius: 2px;
    margin: 0 0 5px;
}

The jQuery

Since the script is dependent with jQuery, let’s include the jQuery library first into the page template

<head>
	...
	<script src="js/jquery.js"></script>
</head>

Then, paste the script below into the page template (inside the <script> tag or into your JavaScript template). I added some comments into the script to explain the process and what each line does.

jQuery(function ($) {
	$('.accordion').each(function() {
		//get the accordion element
		var $this = $(this);

		//find the active li and show the child element
		$this.find('li.active > a').next().show();

		//handle the parent li anchor click event
		$this.find('li > a').on('click', function(e) {
			//find all the div containers
			var containers = $this.find('li > a').next();

			//find the container of the active li
			var activeContainer = $(this).next();

			if (activeContainer.is(':hidden')) { //if the associated container is hidden
				//hide all the containers by sliding up
				containers.slideUp();

				//show the associated container by sliding down
				activeContainer.slideDown();

				//remove the active class to all the li
				$this.find('li').removeClass('active');

				//add the active class to the active li
				$(this).parent().addClass('active');

			} else { //if the associated container is visible
				//hide the container
				activeContainer.slideUp();

				//remove the active class to the active li
				$this.find('li').removeClass('active');
			}
			e.preventDefault();
		});
	});
});

That’s it. Your accordion is all set. Open the demo link below to see this tutorial in action.