Clicking on a radio button explicitly coded to close all bootstrap accordions opens them all instead

fuzzybabybunny

Open this up and on your first click, click on the "Third Radio with no Accordion"

http://jsfiddle.net/3F6TY/3/

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');
    }

});
King King

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');

Updated demo.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

Bootstrap collapse all accordions on button click

How can I configure one button to open/close all accordions?

Close all jQuery Accordions on open

Flutter Radio clickable for all row instead of just the radio button

Bootstrap button to close all collapsible element

a button to close all opened accordion Bootstrap

Button onClick opens all image preview instead one

On clicking on close button of page i want to clear all selectbox value

Close all modals bootstrap

Clicking on taskbar icon now switches windows instead of displaying all of them. How can I revert?

.each opens all containers instead on one

QT, I made modaless dialog, and now I want to close all dialogs by clicking a button

mui controlled accordion icon changes on all accordions when clicking on one specific

How to disable the radio button for a fixed interval of time after clicking them?

How to disable the radio button for a fixed interval of time after clicking them

How to only update 1 row instead of all the rows when clicking a button

Why not all of the action button functionality work when using Enter key instead of clicking?

code opens all submenus on clicking primary menu li item

Implementatio of radio button in html table. Issue: All are selecting instead of selecting one

How to clear all input fields in bootstrap modal when clicking data-dismiss button?

Is there a way in python to execute all functions in a file without explicitly calling them?

How to delete all defined SymPy symbols without explicitly listing them?

How to close all active tabs, when I opens one tab?

Clicking on a disabled radio button

Clicking on radio button

Boxplot for one element instead of all of them

disable all the radio button with same name

How to create a "other" or "catch all" radio button?

how to get all radio button value by name