How to Build Simple jQuery Accordion

Accordion tab is a very useful tool to display various sections of content in a limited amount of space. Some prefer to use a library like jQuery UI to achieve this functionality. But there is a problem like, big file size as well as consuming more bandwidth.

Here, I am going to build a very basic and lightweight accordion using HTML, CSS and jQuery.

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();

})

})