Geek Answers Handbook

Twitter Bootstrap 3 resets when checked

The accordion should fold when checked. And it must be hidden if it is not removed.

Here is the code: http://jsfiddle.net/UwL5L/2/

Why doesn't he check?

<div class="panel-group driving-license-settings" id="accordion"> <div class="panel panel-default"> <div class="panel-heading"> <h4 class="panel-title"> <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> <input type="checkbox" value=""> I have Driver License </a> </h4> </div> <div id="collapseOne" class="panel-collapse collapse in"> <div class="panel-body"> <div class="driving-license-kind"> <div class="checkbox"> <input type="checkbox" value="">A </div> <div class="checkbox"> <input type="checkbox" value="">B </div> <div class="checkbox"> <input type="checkbox" value="">C </div> <div class="checkbox"> <input type="checkbox" value="">D </div> <div class="checkbox"> <input type="checkbox" value="">E </div> </div> </div> </div> </div> </div>
+10
source share
7 answers

UPDATE: There is a better answer below ... Here → *

JS ( Fiddle : http://jsfiddle.net/h44PJ/ ):

 $('.collapse').collapse(); // Don't collapse on checkbox click $('.panel-heading h4 a input[type=checkbox]').on('click', function(e) { e.stopPropagation(); }); // Cancel show event if not checked $('#collapseOne').on('show.bs.collapse', function(e) { if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked')) { return false; } });

UPDATE ( Fiddle : http://jsfiddle.net/h44PJ/567/ ):

 $('.collapse').collapse(); $('.panel-heading h4 a input[type=checkbox]').on('click', function(e) { e.stopPropagation(); $(this).parent().trigger('click'); // <--- HERE }); $('#collapseOne').on('show.bs.collapse', function(e) { if(!$('.panel-heading h4 a input[type=checkbox]').is(':checked')) { return false; } });
+11
source

Here, my solution works by adding a shortcut to a checkbox instead of a hyperlink:

 <div class="checkbox"> <label data-toggle="collapse" data-target="#collapseOne"> <input type="checkbox"/> I have Driver License </label> </div>

http://jsfiddle.net/L0h3s7uf/1/

+62
source

Look at this. I did this and worked great.

 <script> $(function () { if($('#id_checkbox').prop('checked')) { $('#id_collapse').collapse(); } }); </script>
+3
source

You don't even need to initialize .collapse . Just change the title to:

 <h4 class="panel-title"> <input type="checkbox" value="" data-toggle="collapse" data-target="#collapseOne" /> I have Driver License </h4>
+3
source

I designed a fancy switch flag to collapse accordion content.

 <h4 class="panel-title"> <label data-toggle="collapse" data-target="#collapseOne" class="control-toggle"> <input type="checkbox" /> <div class="toggle-button"></div> </label> I have Driver License </h4>

Hope you guys like this :-)

Script link: http://jsfiddle.net/ajay1008/fkrehhna/

+1
source

I had the same problem and found the answer to this video: http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098/176537-4.html I hope this helps! I am using it now to collapse the full div below the checkbox, very simple. The only problem is that if you double-click on it, it becomes messy, but usually it doesn’t.

0
source 
 <input type="checkbox" data-toggle="collapse" data-target="#demo" uncheck/>I have Driver License <div id="demo" class="collapse"> <label>What you want collapse</label> </div>
0
source

More articles:


All Articles