Responsive jQuery Accordions

Today we’re going to code some responsive jQuery accordions.

Accordions are an extremely popular UI element on most websites and applications, especially for content rich sites. However, most accordions require that only one accordion can be opened at a time. I’m going to show you how to code an accordion group that allows each accordion to be opened independently of it’s siblings.

HTML

Our markup starts with a parent .accordion-container div. Inside that div we’ll have an anchor tag with class of accordion-toggle and another child div with the accordion-content class. All of your content – images, text, etc. – should go inside .accordion-content.

<div class="accordion-container">
	<a href="#" class="accordion-toggle">Rome <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_rome.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Florence <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_florence.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->
<div class="accordion-container">
	<a href="#" class="accordion-toggle">Venice <span class="toggle-icon"><i class="fa fa-plus-circle"></i></span></a>
	<div class="accordion-content">
		<img src="images/italy-thumb_venice.jpg" />
		<p>...</p>
	</div>
	<!--/.accordion-content-->
</div>
<!--/.accordion-container-->

CSS

Our CSS is pretty simple. We’ll hide the .accordion-content divs using display:none and then toggle them using jQuery. Feel free to adjust the padding, colors, etc., for your toggle links and accordion content.

We’ve also got a CSS3 media query to adjust the accordion-content padding and overflow properties when in mobile view, thus keeping our promise on these accordions being responsive 🙂

.accordion-container {
	width: 100%;
	margin: 0 0 20px;
	clear: both;
}
.accordion-toggle {
	position: relative;
	display: block;
	padding: 20px;
	font-size: 1.5em;
	font-weight: 300;
	background: #999;
	color: #fff;
	text-decoration: none;
}
.accordion-toggle.open {
	background: #333;
	color: #fff;
}
.accordion-toggle:hover {
	background: #666;
}
.accordion-toggle span.toggle-icon {
	position: absolute;
	top: 9px;
	right: 20px;
	font-size: 1.5em;
}
.accordion-content {
	display: none;
	padding: 20px;
	overflow: auto;
}
.accordion-content img {
	display: block;
	float: left;
	margin: 0 15px 10px 0;
	max-width: 100%;
	height: auto;
}

/* media query for mobile */
@media (max-width: 767px) {
	.accordion-content {
		padding: 10px 0;
		overflow: inherit;
	}
}

jQuery

We’ll use jQuery to do 3 things:

1. Toggle the accordion link “open” class
2. Toggle the accordion content (hide & show)
3. Change the accordion link plus/minus icon

It’s important to note that we use jQuery’s .next method, which works because our .accordion-toggle link and .accordion-content div are siblings. So pay close attention to your nesting.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
    $('.accordion-toggle').on('click', function(event){
    	event.preventDefault();
    	// create accordion variables
    	var accordion = $(this);
    	var accordionContent = accordion.next('.accordion-content');
    	var accordionToggleIcon = $(this).children('.toggle-icon');
    	
    	// toggle accordion link open class
    	accordion.toggleClass("open");
    	// toggle accordion content
    	accordionContent.slideToggle(250);
    	
    	// change plus/minus icon
    	if (accordion.hasClass("open")) {
    		accordionToggleIcon.html("<i class='fa fa-minus-circle'></i>");
    	} else {
    		accordionToggleIcon.html("<i class='fa fa-plus-circle'></i>");
    	}
    });
});
</script>

Conclusion

As I mentioned earlier, these accordions are unique from most framework accordions (Bootstrap, jQuery UI, etc.) because they don’t require only one accordion to be opened at a time. Thanks for reading – I hope these are helpful in your projects!