chihung
2/11/2020 - 3:16 AM

Bootstrap collapse with radio buttons

<h2>Bootstrap collapse panel with radio buttons</h2>

<br />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span>Display panel: </span>

        <input name="collapseGroup" type="radio" value="yes"/> Yes

        <input name="collapseGroup" type="radio"  checked value="no"/> No

      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                    Header
                </h4> 
          </div>
          <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

$('[name="collapseGroup"]').on('change', function(){  
  if($(this).val()  === "yes"){
    $('#collapseOne').collapse('show')
  }else{
     $('#collapseOne').collapse('hide')
  }
});