Radio button toggle expand using Bootstrap 4

Question

I am trying to use Bootstrap 4 to create a form that expands different elements as each "button" is clicked.

How it should work: Buttons(radio): YES / NO --- If "YES" is clicked then it expands an element containing checkbox buttons.

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active" data-toggle="collapse" href="#collapseExample" aria-expanded="false"> 
    <input type="radio" name="options" id="option2" autocomplete="off"> Yes
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3" autocomplete="off"> No
  </label>
</div>
<!-- Expanded Buttons -->
<div class="btn-group collapse" id="collapseExample" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3
  </label>
</div>
<!-- / Expand Buttons -->

Here's a link to my Pen.

Answer 1

Here is a simple solution, that shows the div when Yes is checked, and hides it if No is checked:

<label>
    <input type="radio" name="radio" data-toggle="collapse" data-target="#collapseExample:not(.show)"> Yes
</label>
<label>
    <input type="radio" name="radio" data-toggle="collapse" data-target="#collapseExample.show"> No
</label>

<div class="collapse" id="collapseExample">
    Gets toggled by radios
</div>

FIDDLE