Accordion is expandable and collapsible content
holder that is broken into sections and probably looks like tabs. On net you
will get plenty of Accordion plug-ins which are with their complicated structure
and heavy js files. So they are hard to modify as per
your requirement.
I am writing here a simple and light weight
jquery accordion. This is basic structure with scope of modifications. So try
this out.
<!DOCTYPE html PUBLIC "-//W3C//DTD
XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Accordion</title>
<script
src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script
type="text/javascript">
$(document).ready(function () {
$(".accordiondiv h1").click(function () {
$('.active').removeClass('active');
$(this).addClass('active');
$(this).siblings('.accordionbody').slideToggle();
});
});
</script>
<style>
.accordionbody
{
display: none;
border: 1px solid;
padding: 8px;
}
.accordiondiv h1
{
background-color: #333;
color: #fff;
font-weight: normal;
padding: 10px;
font-size: 17px;
margin: 0;
border: 1px solid;
}
</style>
</head>
<body>
<div
class="maindiv">
<div class="accordiondiv">
<h1>
accordion 1</h1>
<div class="accordionbody">
some text here
</div>
</div>
<div class="accordiondiv">
<h1>
accordion 3</h1>
<div class="accordionbody">
some text here
</div>
</div>
<div class="accordiondiv">
<h1>
accordion 4</h1>
<div class="accordionbody">
some text here
</div>
</div>
</div>
</body>
</html>
|
