Simple jQuery Accordion

Accordion tabs can be a very useful tool to display various sections of content in a limited amount of space. Some people prefer to use a library like jQuery UI to achieve this functionality. But the problem with this is they are often huge in terms of file size and consume more bandwidth.

Today, we are going to build a very basic and lightweight Accordion using HTML, CSS and jQuery.

Click Here to view the working demo.

HTML:

<div class="container">
	<div class="question">Accordian 1</div>
	<div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
	<div class="question">Accordian 2</div>
	<div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
	<div class="question">Accordian 3</div>
	<div class="answer">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div>
</div>

CSS:

.container {
	width: 500px;
	margin: 0px auto;
}
.question {
	padding:5px;
	background-color:#e3e3e3;
	cursor:pointer;
}
.answer {
	padding: 5px;
	display:none;
}

jQuery:

$(document).ready(function(){
	$('.question').on('click',function(){
		$(this).next().slideToggle().siblings('.answer').slideUp();
	})
})

See Also: How to get value of selected checkboxes using jQuery?

0 Comments

Leave a Comment.