Hey, can someone help me fix this code? I'm trying to make it so that only one element opens at a time, but I can't seem to figure out how. Right now, if I click on two elements, they both open and the other one doesn't close.
This is what I have:
<div class="accordion" id="accordion">
<div class="row">
<!--Number 1-->
<div class="panel clp" style="width: 100%" onmouseover="number1();" onmouseout="reset();">
<div class="panel-heading" id="headingOne">
<h4 class="panel-title">
<a role="collapsed" data-toggle="collapse" data-parent="#accordion" data-target="collapseOne" aria-expanded="false" aria-controls="collapseOne">
UI / UX
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
<!--Number 2-->
<div class="panel panel-default clp" style="width: 100%" onmouseover="number2();" onmouseout="reset();">
<div class="panel-heading" role="tab" id="headingTwo" >
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" data-target="collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Branding & Art Direction
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid.
</div>
</div>
</div>
Additionally, I'm using this function to show and hide the element:
$("#headingOne").parent('.panel').hover(
function() {
$(this).children('.collapse').collapse('show');
}, function() {
$(this).children('.collapse').collapse('hide');
}
);
$("#headingTwo").parent('.panel').hover(
function() {
$(this).children('.collapse').collapse('show');
}, function() {
$(this).children('.collapse').collapse('hide');
}
);