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?

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

Nessim

Care to elaborate further? – Tartarous

Answer 1

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

Discrown

Yes,It cheks. But It doesn't works as collapse. As I told It have to collpase by checking checkbox. – Nessim

@YenneInfo Can you please look at my question, it is almost the same as this one? #22481024 – Dyna

@bambiinela share the link to your question please – Discrown

Sorry, I put wrong link. Here is my question: #28517866 – Dyna

if you double click quickly on the checkbox the area will show, but the checkbox will be unchecked. – Thoughtout

You can also check the box, expand it, then uncheck the box and it stays shown. – Unicorn

@Unicorn I suggest you to read the 'update' part... It resolves the issue you're talking... – Discrown

Answer 2

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/

Destiny

IMO, this is the best answer here. It results in the least amount of code writing, collapses the correct element(s), and yields a correctly-behaving checkbox that doesn't take on link-like behavior & styling. This seems to be the only answer here that actually solves the OP's issue. Glad I found it, too, because it solved my issue as well. – Linis

No, if you double click quickly on the checkbox the area will show, but the checkbox will be unchecked – Thoughtout

@Thoughtout don't click so fast then. Its a great answer! – Circumscription

@Circumscription tell my users and QA that – Thoughtout

It is working, but not for my use case. When loading the form the checkbox is either checked or unchecked depending on a database entry. When it is unchecked, initially the collapsible content is not collapsed and will be collapsed, when i check the checkbox. So in this case, it's the wrong way around... – Discommodity

Answer 3

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>

Antoneantonella

this seems the most logical answer which works, at least on Firefox 61.0.1 (something i cannot say about the wrapping-in-a-label workaround above) - my guess is, though, that specifying data-toggle and data-target wasn't always working for input type="checkbox" – Cannabin

Answer 4

Look at it. I did it and works fine.

<script> 
        $(function () {

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

</script>

Cere

Answer 5

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/

Bypass

Answer 6

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.

Autotomize

Answers with links, but no details on the actual solution, are discouraged on SO. If the link breaks, your answer becomes obsolete. Not to mention that viewing this video requires at least a trial membership to Lynda.com. – Linis

Answer 7

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/

Titoism

Answer 8

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

Cao

Welcome to StackOverflow. Try to explain more clearly why this is an answer to the question. – Fluoroscope