'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>
htmltwitter-bootstrap


Solution 1:[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 .collapseOne:not.in 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=".collapseOne.in" 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 class="collapseOne panel-collapse collapse">
            <div class="panel-body">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>

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

Solution 2:[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") {
    $('#collapseOne').collapse('show');
  } else {
    $('#collapseOne').collapse('hide');
  }
});

Codepen

Solution 3:[3]

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

Solution 4:[4]

You can do this by some JQuery

HTML:

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></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>
   content
 </p>

Jquery:

$(document).ready(function(){
    $('.yes').click(function(){
        $('p').slideDown(); //to show
    });
    $('.no').click(function(){
        $('p').slideUp();  //to hide
    });
});

CSS:

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

and here is the live example https://jsfiddle.net/54jxaoas/1/

Solution 5:[5]

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

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

if ($('#check').is(':checked')) {
$('p').slideDown(); 
 }
else {
$('p').slideUp(); 
}

Solution 6:[6]

Expanding on the data-target=".collapseOne:not(.show)" and data-target=".collapseOne.show" idea... if you have more than one thing (one for each radio button), and you want to have only the corresponding div showing, then you can use the accordion mechanic from Bootstrap.

You need to have a <div> outside of both collapsed items:

<div id="accordion">

And then you just add data-parent="#accordion" to the buttons that trigger each collapse.

Solution 7:[7]

You can change section visibility on radio button change by below code you can even gone visible two section at a time

<div class="form-row">
<div class="form-group col-md-6">
    <label class="small mb-1" for="inputFirstName">Category Repeat</label>
    <input name="collapseGroup" type="radio" data-toggle="collapse" value="0" data-target="#accordion:not(.show),#accordiof.show"/> Yearly
    <input name="collapseGroup" type="radio" data-toggle="collapse" value="1" data-target="#accordion.show,#accordiof:not(.show)" checked/> Weekly
    <div class="panel-group panel-collapse collapse" id="accordion">
        <input type="date" name="catorder1" id="catorder1" placeholder="catorder1"
               class="form-control"/>
    </div>
    <div class="panel-group panel-collapse collapse" id="accordiof">
        <input type="number" name="catorder" id="catorder" placeholder="catorder"
               class="form-control"/>
    </div>
</div>

Solution 8:[8]

Bootstrap 5 is without jQuery, you can do it like this there:

document.getElementById('collapseOne').addEventListener('show.bs.collapse', (e) => {
   if (/*some condition is met*/) {
      e.preventDefault();
   }
});

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Silvan
Solution 2
Solution 3 max
Solution 4 QararUlHassan
Solution 5 panatoni
Solution 6
Solution 7 Manthan Patel
Solution 8 nerdess

Related Questions