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