In some scenario we required to design expand & collapsible control using pure Jquery. Let’s assume the application for which we are going to design Accordion is not using Jquery UI. Jquery UI is having its own in-build Accordion function. Using this it is a line of code to implement accordion. In this example let me show you how to create an accordion Jquery menu without using jQuery UI library.
In the below example I have 4 div’s. Div id’s with header-A & header-B are the header tabs for my accordion. On click of this headers I need to show the body-A & body-B div’s respectively. Referring a Jquery CDN library here inside the document.ready() method initially I am hiding all the body div’s. Then on click of each header div I am checking whether the respective body div is visible or not. If the div is hidden then I am applying Jquery show method to display the relative body div. If the div is visible then I am hiding the respective body div. To make the accordion collapse & expand features smooth I used slow as a parameter to show() & hide() methods.
Accordion-Jquery.htm
<!Doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
<title>Example of Simple Accordion Jquery menu</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*Initially hiding all sub div*/
$(".AccordionBody").hide();
/*For Accordion A*/
$("#header-A").click(function() {
/*Checking is sub div is hidden*/
if($("#body-A").is(':hidden')) {
$("#body-A").show('slow');
} else {
$("#body-A").hide('slow');
}
});
/*For Accordion B*/
$("#header-B").click(function() {
/*Checking is sub div is hidden*/
if($("#body-B").is(':hidden')) {
$("#body-B").show('slow');
} else {
$("#body-B").hide('slow');
}
});
});
</script>
<style type="text/css">
.AccordionHeader {
background: none repeat scroll 0 0 #0A567D;
color: #FFFFFF;
padding: 10px;
font-family: arial,sans-serif,verdana;
cursor: pointer;
margin-bottom: 1px;
}
.AccordionBody {
background: none repeat scroll 0 0 #bde8f4;
font-family: arial,sans-serif,verdana;
padding: 10px;
}
</style>
</head>
<body>
<div class="AccordionHeader" id="header-A">About our Company</div>
<div class="AccordionBody" id="body-A">Welcome to Vijayshanti Infotech. We are a group of highly experienced professionals working together to make your web better.</div>
<div class="AccordionHeader" id="header-B">Service we Sale</div>
<div class="AccordionBody" id="body-B">We do provide Responsive Web Application Development, Fancy Web Designing, Graphics, High-end Search Engine Optimization & Digtal Marketing.</div>
</body>
</html>
