jQuery Accordion with Animations

Posted on June 2, 2017 by Dan Doicaru in jQuery/JavaScript Category with Medium Difficulty

After a very long time without any articles on my website (just being busy with my job), I'm back with a well written and useful tutorial. Therefore, I will teach you how to create a jQuery accordion with arrows, using a short code and make it responsive to work on all devices.

We will work mostly with CSS to hide the content using a helper class for the active items and the animations. The code for our simple jQuery accordion will be 5 lines long, which includes the slide up and down animations.

Simple jQuery Accordion Example

Video Tutorial

HTML Structure for jQuery Accordion

The key to a good working page is to have the code short and simple. Just keep your html markup clean, with containers that you really need and avoid extra elements.

<div class="jquery_accordion_wrapper">
	<div class="jquery_accordion_item">
		<div class="jquery_accordion_title">First Section Tab Title</div>
		<div class="jquery_accordion_content">
			<p>Lorem ipsum dolor sit amet.</p>
			<p>Delectus similique tenetur voluptas eligendi.</p>
		</div>
	</div>

	<div class="jquery_accordion_item">
		<div class="jquery_accordion_title">Second Section Title</div>
		<div class="jquery_accordion_content">
			<p>Lorem ipsum dolor sit amet.</p>
		</div>
	</div>

	<div class="jquery_accordion_item">
		<div class="jquery_accordion_title">Third Section Title</div>
		<div class="jquery_accordion_content">
			<p>Lorem ipsum dolor sit amet.</p>
		</div>
	</div>
</div>

Notice that I used a div for the jQuery accordion title, instead of a heading. If you think that your content has a major impact to SEO, you can change the title div into heading.

Code for jQuery Accordion

The jQuery code will be pretty simple. We only need to add click() event on each title section of our jQuery accordion. The entire idea is to add an active class to the clicked item and slide the content down (or up if the content is visible).

$('.jquery_accordion_title').click(function() {
	$(this).closest('.jquery_accordion_item').siblings().removeClass('active').find('.jquery_accordion_content').slideUp(400);
	$(this).closest('.jquery_accordion_item').toggleClass('active').find('.jquery_accordion_content').slideToggle(400);
	return false;
});

In the code above we used $(this) selector to target the element that is being clicked. First of all we add the "active" class to our item and then we search it on another items and remove it. Remember that we only need one element active.

After that we target the content and slide it up on the other elements and slide it down on the current one, since we only need a single tab opened. Pretty simple math, right?

Applying some CSS

These styles I used in my example are pretty basic, but fell free to style them as you want. The jQuery accordion is already responsive from my code and will work on any device. You can try it by shrinking the browser window in the live demo.

/* Simple Accordion jQuery */
.jquery_accordion_item {
	display: inline-block;
	width: 100%;
	border-bottom: 1px solid #ccc;
}
.jquery_accordion_title {
	font-size: 14px;
	color: #333;
	display: block;
	line-height: 140%;
	padding: 8px 40px 8px 8px;
	font-weight: bold;
	position: relative;
	cursor: pointer;
}
.jquery_accordion_title:after {
	content: "";
	width: 0;
	height: 0;
	display: inline-block;
	position: absolute;
	right: 15px;
	top: 50%;
	border: 6px solid transparent;
	border-top-color: #333;
	transition: border 400ms, margin 400ms;
	margin-top: -3px; /* half of border value */
}
.jquery_accordion_item.active .jquery_accordion_title:after {
	border-color: transparent;
	border-bottom-color: #333;
	margin-top: -9px; /* fixing arrow position */
}
.jquery_accordion_content {
	padding: 8px;
	display: none;
	color: #333;
}
.jquery_accordion_content > *:first-child {
	margin-top: 0;
}

Few End Notes

This horizontal jQuery accordion will help you especially when you have a lot of content with sections and you want to save some space in your page. It works fast and has only few rows of code.

Please don't forget to include that jQuery library file in your header, as your code will not work obviously. For older browsers, make sure to download older versions of jQuery, such as 1.x.

Live Demo

Download

Related Articles
Comments
Hint: Wrap your code syntax (html, css or others) between <pre> and </pre> tags. All comments are moderated.


2 + = 11

Search
Subscribe by E-mail

HTML-TUTS is created and maintained by Dan Doicaru.
This website is a rebrand to Extreme Design Studio (extremestudio.ro), built under WordPress platform.