Bootstrap Radio Buttons Toggle Collapse but stay open when clicked repeatedly

Is there a pure HTML way to keep the collapsed panels open while the radio button triggering them is selected? Every example I find lets the opened panel close again when the same Opening Button is clicked again.

I'd like to have the collapsed panel say visible when the triggering radio button is pressed again.

Examples of the opened panel closing when clicked multiple times: https://codepen.io/martinkrulltott/pen/waRXgw

https://www.bootply.com/U8J7eJh3O6

Solution

You can try something like this. After you get the functionality you want you can style with bootstrap components.

HTML:

<form>
  Display Panel:
  <input type="radio" name="portion_selection" value="button_one" /> Yes
  <input type="radio" name="portion_selection" value="button_two" /> No
  <div id="portion_one" style="display:none">
    <div class="card">
      <div class="card-body">
        1. This is some text within a card body.
      </div>
    </div>
  </div>
  <div id="portion_two" style="display:none">
    <div class="card">
      <div class="card-body">
        2. This is some text within a card body.
      </div>
    </div>
  </div>
</form>

JS:

$("input[name='portion_selection']:radio")
    .change(function() {
      $("#portion_one").toggle($(this).val() == "button_one");
      $("#portion_two").toggle($(this).val() == "button_two"); });

Example Codepen: https://codepen.io/brooksrelyt/pen/GzWzOv