I am having trouble closing the active panel using jQuery. The rest of my code is functioning perfectly, but for some reason, I can't get the active panel to close.
Currently, the code is working correctly in that only one panel can be open at a time, which is exactly what I want. I'm sure the solution to fixing the issue is simple!
$(document).ready(function($) {
$( "#accordion").on('click','.accordion-heading', function (e) {
$return = true;
if($(this).next('div').is(':visible')== false) $return = false;
$( "#accordion .panel2").slideUp();
$("#accordion .accordion-heading").removeClass('active');
$(this).next('div').stop(true,false).slideDown();
$(this).addClass('active');
return $return;
});
.panel1 {
width: 60%;
margin-left: 20px;
}
.accordion-default {
border-bottom: 1px solid #C8C8C8;
}
/* CSS styles omitted for brevity */
</script>
<div class="panel1" id="accordion">
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading1</a> </div>
<div class="panel2 accordioncollapse collapse" ">
<div class="accordion-body"> Collapsible Content #1 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading2</a> </div>
<div class="panel2 accordioncollapse collapse" >
<div class="accordion-body"> Collapsible Content #2 </div>
</div>
</div>
<div class="accordion-default">
<div class="accordion-heading">
<a class="accordion-toggle collapsed" >Heading3</a> </div>
<div class="panel2 accordioncollapse collapse" id="collapseThree" >
<div class="accordion-body"> Collapsible Content #3 </div>
</div>
</div>
</div>