How to Create a Simple Animated jQuery Accordion

In this tutorial, you'll learn how to create a simple animated jQuery accordion (collapsible content block). Accordion format is popularly used for FAQs.

It is very simple and straightforward. 

Create the HTML

<div class="container">
		<div class="row">
			<div class="faq-title">This is the first FAQ</div>
			<div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
		</div>
		
    <div class="row">
		<div class="faq-title">This is the second FAQ</div>
		<div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
	</div>
    
	<div class="row">
		<div class="faq-title">This is the third FAQ</div>
		<div class="faq-content"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p></div>
	</div>
	
	<div>

In the above example, there is an outer container with three rows inside, one for each FAQ. Inside each row, there is a title and a description. Our goal is to show the above code in accordion format.

Add some CSS for styling

.container {
	margin: 50px auto 50px auto;
	max-width: 375px;
	font-family: roboto;
	border: 1px solid #ccc;
	box-shadow: 0 0 8px #ccc;
	padding: 20px 20px 0 20px;
	border-radius: 10px;
}

.row {
	margin-bottom: 20px;
}

.faq-title {
	border: 1px solid #ccc;
	padding: 15px;
	border-radius: 8px;
	font-size: 18px;
	font-family: Poppins;
	font-weight: 500;
	cursor: pointer;
}

.faq-content {
	display: none;
	margin-top: 20px;
	font-family:roboto;
	color: #444;
}

.faq-content p {
	margin: 0;
	padding: 0;
}

The above code will style the block according to the screenshot. We are also hiding the FAQ content for all rows on initial page load. Now, the most important part is the jQuery code.

Add jQuery

$(document).ready(function() {
	$(".faq-title").on('click', function(){
		var current = $(this).parent().find('.faq-content');
		$('.faq-content.opened').slideUp(300);
		current.slideDown(300);
		current.addClass('opened');
	});
});

Here is how the above code works:

• The first line runs the enclosed code when the document is loaded and ready.
• In the second line we have put a function on a click event, which is attached to the FAQ title. 
• In the third line, we are saving the current row's content element in a variable "current" after any title is clicked.
• "opened" is the class, which we give to the currently opened element (in the last step below). So, in the fourth line, we slide up (hide) the content of any already opened FAQ content in 300ms, giving it a smooth animation effect.
• In the fifth line, we use the jQuery slideDown method to show the current element in 300ms, giving it a smooth animation effect.
• In the next line, we add the "opened" class to the currently opened element so that we can close it when any other title is clicked (via jQuery slideUp method shown above).

Very simple and easy, right? You can also download the complete code below.