lewis4u lewis4u - 3 months ago 43
HTML Question

Bootstrap collapse on radio button

I have found this LINK on Stack overflow and what i want to achieve is that when user clicks on a radio button that div stays in that state.

enter image description here

For example if i click on Yes the panel should be visible and if i click again on Yes it MUST not close the panel like it does now.

Anyone knows how to fix it?

here is the source code:

<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" data-toggle="collapse" data-target="#collapseOne"/> Yes

<input name="collapseGroup" type="radio" data-toggle="collapse" data-target="#collapseOne" checked/> 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>

Answer

You can do it using jQuery (adding IDs to inputs):

var yesRadio = $('#yes'),
    noRadio = $('#no');

yesRadio.click(function () {
  if($('#collapseOne').hasClass('in')) {
    return false;
  }
});

noRadio.click(function () {
  if(!$('#collapseOne').hasClass('in')) {
    return false;
  }
});

CODEPEN