Open this up and on your first click, click on the "Third Radio with no Accordion"
Why does this reveal all the accordions, and only on the first click? My code explicitly tells it to close all accordions. No where did I instruct it to open anything...
<div class="radio col-xs-12">
<label>
<input type="radio" name="radios" class="track-order-change" id="firstRadio" value="">
First Radio
</label>
</div>
<div class="col-xs-12 panel-collapse collapse" id="firstAccordion">
<div>
First Accordion
</div>
</div>
<div class="radio col-xs-12">
<label>
<input type="radio" name="radios" class="track-order-change" id="secondRadio">
Second Radio
</label>
</div>
<div class="col-xs-12 panel-collapse collapse" id="secondAccordion">
<div>
Second Accordion
</div>
</div>
<div class="radio col-xs-12">
<label>
<input type="radio" name="radios" class="track-order-change" id="thirdRadio">
Third Radio with no Accordion
</label>
</div>
$('input[name="radios"]').change( function() {
if ($('#firstRadio').is(":checked")){
$('#firstAccordion').collapse('show');
} else {
$('#firstAccordion').collapse('hide');
}
if ($('#secondRadio').is(":checked")){
$('#secondAccordion').collapse('show');
} else {
$('#firstAccordion').collapse('hide');
}
if ($('#thirdRadio').is(":checked")){
$('#firstAccordion').collapse('hide');
$('#secondAccordion').collapse('hide');
}
});
Calling .collapse('hide')
shoud not show the element in any context, that is no matter the element is currently collapsed or expanded. You can compare this to how .hide()
and .show()
methods in jQuery works, no matter the current state of the element is visible or hidden, using .hide()
should ensure that the element is hidden.
I've just found a way to work-around this bug-like issue. Firstly you need to add the class in
intially for your accordions. Then call the .collapse('hide')
initially to collapse the accordions (instead of using just the class collapse
in HTML code):
HTML:
<!-- add the class "in" and also do this for all other accordions -->
<div class="col-xs-12 panel-collapse collapse in" id="firstAccordion">
<div>
First Accordion
</div>
</div>
JS:
//Just add this line to intially collapse the accordions
$('#firstAccordion, #secondAccordion').collapse('hide');
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments