CODEWITHSUNDEEP
javascriptjquerytwitter-bootstraptwitter-bootstrap-3jquery-ui-accordion
Dj.Sunrise
Dj.Sunrise

Reputation: 493

Twitter Bootstrap 3 collapse when checkbox checked

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? 

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

Upvotes: 16

Views: 39972

Answers (8)

Kound
Kound

Reputation: 2551

I know it is an old question but I had some troubles with Firefox and Reloading pages which would leave the checkbox checked and the content hidden - not a good user experience.

IMO it is the easiest to simply add/remove the class for hiding/showing content depending on the status of the checkbox.

Here is my example code for this


$(document).ready(function()
{
    $('input[type=checkbox][data-toggle^=toggle]').on('change',
          function (e) {
                let checkbox = $(this);
                let target=$(checkbox.data('target'));
                if (checkbox.is(":checked")) {
                    target.addClass("show");
                    target.addClass("in");
                } else {
                    target.removeClass("show");
                    target.removeClass("in");
                }
            }
    );
    /* Make sure the state is correct - especially after Pressing F5 */
    $('input[type=checkbox][data-toggle^=toggle]').each(
        function (index, elem) {
                let checkbox = $(this);
                let target=$(checkbox.data('target'));
                if (checkbox.is(":checked")) {
                    target.addClass("show");
                    target.addClass("in");
                } else {
                    target.removeClass("show");
                    target.removeClass("in");
                }
        }
    )
});

As you can see you have to simply add the data-toggle=toggle and the data-target element to your input like this:

<input id="license" type="checkbox" data-toggle="toggle" data-target="#collapseOne"><label for="license">I have Driver License</label>

An example can be found here: https://jsfiddle.net/Kound/z95cLt86/8/

The code works for bootstrap 3 (.in) and bootstrap 4 (.show). Adopt it to your needs.

PS: The code also works in combination with https://github.com/gitbrent/bootstrap4-toggle/

Upvotes: 0

Rolando
Rolando

Reputation: 1

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

Upvotes: -1

BENARD Patrick
BENARD Patrick

Reputation: 30975

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

Upvotes: 12

Ajay.R1008
Ajay.R1008

Reputation: 37

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/

Upvotes: 1

Igor Mizak
Igor Mizak

Reputation: 1108

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>

Upvotes: 4

LegustasBR
LegustasBR

Reputation: 29

Look at it. I did it and works fine.

<script> 
        $(function () {

            if($('#id_checkbox').prop('checked'))
            {
                $('#id_collapse').collapse();
            }
        });

</script>

Upvotes: 2

Gavin
Gavin

Reputation: 5871

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/

Upvotes: 69

Hugo Tognolo
Hugo Tognolo

Reputation: 33

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.

Upvotes: 0

Related Questions