Accordion
Accordion
Hi all,
I tried to create an accordion with the following code,but its not responding to what i am trying,please correct me my mistakes.
<html>
<head>
<style>
.accordion
{
overflow:hidden;
border-radius:4px;
background:#f7f7f7;
}
.accordion-section-title
{
width:100%;
padding:15px;
}
.accordion-section-title
{
width: 100%;
padding: 15px;
display: inline-block;
background-color: #333;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration:none;
}
.accordion-section-title.active
{
background-color:#4c4c4c;
text-decoration:none;
}
.accordion-section-title:hover
{
background-color:grey;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
border-bottom:none;
}
.accordion-section-content
{
padding:15px;
display:none;
}
</style>
<script src="
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
function close_section()
{
$('.accordion .accordion-section-title').removeClass('active');
$('.accordion .accordion-section-content').slideUp(300).removeClass('open');
}
$('.accordion-section-title').click(function(e)
{
var currentAttrvalue =$(this).attr('href');
if($(e.target).is('.active'))
{
close_section();
}else
{
close_ssection();
$(this).addClass('active');
$('.accordion' + currentAttrvalue).slideDown(300).addClass('open');
}
e.preventDefault();
});
});
</script>
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="acordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
</body>
</html>