This tutorial will help you to create an accordion and use it for making html page more user friendly, interactive and presentable. Accordion are usually used in pages that consists questionnaires and wherein we want to display the answers and move forward quickly, have multiple categories and sub categories.
We will learn it in the following 3 steps:
- Let us start with the html code:
<html>
<head>
<title>Accordion</title>
<link rel="stylesheet" type="text/css" href="main.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="accordfunctionality.js"></script>
</head>
<body>
<div class="main">
<div class="accord">
<div>
<a class="title-for-content" href="#content-1">Content 1</a>
<div id="content-1" class="content">
<p>This section consists content 1.</p>
</div><!--end of div with id #content-1-->
</div>
<div>
<a class="title-for-content" href="#content-2">Content 2</a>
<div id="content-2" class="content">
<p>This section consists content 2.</p>
</div><!--end of div with id #content-2-->
</div>
<div>
<a class="title-for-content" href="#content-3">Content 3</a>
<div id="content-3" class="content">
<p>This section consists content 3.</p>
</div><!--end of div with id #content-3-->
</div>
</div><!--end of div with class .accord-->
</div>
</body>
</html>
- In this second step, we will write a css file named: main.css
.title-for-content {
width:350px;
display:inline-block;
border:2px solid #FFE300 ;
background:#1591F2;
text-align: center;
padding:10px;
}
.content {
padding:10px;
display:none;
}
- In this step we will create a file named: accordfunctionality.js
$(document).ready(function() {
function output_for_accord() {
$('.accord .title-for-content').removeClass('active');
$('.accord .content').slideUp(100).removeClass('open');
}
$('.title-for-content').click(function(e) {
// get the value of current anchor
var value_of_div_id = $(this).attr('href');
if($(e.target).is('.active')) {
output_for_accord();
}else {
output_for_accord();
// Add active class to section title
$(this).addClass('active');
// Display the hidden content
$('.accord ' + value_of_div_id).slideDown(100).addClass('open');
}
e.preventDefault();
});
});
For more information visit the below Link:
https://jqueryui.com/accordion/
0 Comment(s)