Twitter Bootstrap 3 collapse when checkbox checked

Question

Accordion have to collapse on checked checkbox. And must be hidden when it\'s uncheked.

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

Why it doesn\'t checks? <

Answer 1

I was facing the same problem and I've found the answer on this video: http://www.lynda.com/Bootstrap-tutorials/Adding-check-box-using-collapse-enhance-usability/161098/176537-4.html I hope it helps! I'm using it now to collapse a full div below a checkbox, very simple. The only problem is if you double click it fast it gets messed, but it usually doesnt happen.

Answer 2

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

Answer 3

Here's my solution, works by adding a label wrapper to the 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/

Answer 4

I developed a fancy checkbox toggle for collapse of 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 it :-)

Fiddle Link: http://jsfiddle.net/ajay1008/fkrehhna/

Answer 5

You don't even need to initialize .collapse. Just change your header to:

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

Answer 6

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