Bootstrap collapse on radio button


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.

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:

Bootstrap collapse panel with radio buttons

Display panel: Yes No




Answer 1:

Bootstrap and css only solution:
Remove the panel’s id and add a unique class to the class instead. Change the data-target selector for .collapseOne:not(.in) on “Yes” and for “No”.

<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:not(.in)"/> Yes

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target="" checked/> No

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


Answer 2:

You can remove data-toggle="collapse" and data-target="#collapseOne"

Add values to your inputs value="yes" and value="no"

And hide/show collapse with javascript on input change event

$('[name="collapseGroup"]').on('change', function() {  
  if($(this).val() === "yes") {
  } else {


Answer 3:

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

var yesRadio = $('#yes'),
    noRadio = $('#no'); () {
  if($('#collapseOne').hasClass('in')) {
    return false;
}); () {
  if(!$('#collapseOne').hasClass('in')) {
    return false;


Answer 4:

You can do this by some JQuery


 <script src=""></script>
<!-- radio button with calss -->
<input name="collapseGroup" type="radio" class="yes" data-toggle="collapse" data-target="#collapseOne"/> Yes
<input name="collapseGroup" type="radio" class="no" data-toggle="collapse" data-target="#collapseOne" checked/> No
<!-- content to show/hide -->


        $('p').slideDown(); //to show
        $('p').slideUp();  //to hide


   background: white;
   border: 1px solid #c6c6c6;
   border-radius: 5px;
   padding: 15px;
   display: none;

and here is the live example

Answer 5:

I think better and easier solution is to use just a checkbox

<input type="checkbox" id="check" />

if ($('#check').is(':checked')) {
else {

Our Awesome Free Tools