18

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>
1
  • So there is now way to do this without jQuery/javascript?
    – lewis4u
    May 29, 2016 at 21:59

8 Answers 8

29

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>
3
  • 1
    Why class rather than ID? Sep 18, 2017 at 14:20
  • 11
    In bootstrap4 use data-target=".collapseOne:not(.show)" and data-target=".collapseOne.show" because the open class is show Apr 9, 2019 at 6:57
  • This is brilliant, thanks! #target:not(.show) works for me. Jun 3, 2020 at 19:26
10

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

0
5

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

1

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/

1

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(); 
}
1

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.

0

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>
0

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();
   }
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.