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>

score 68 · Answer 1 · answered Mar 23 '15 at 02:11

68

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/

answered Mar 23 '15 at 02:11

Gavin

5,068
6
37
80

4

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. – digijim Apr 30 '15 at 22:07
22

No, if you double click quickly on the checkbox the area will show, but the checkbox will be unchecked – BlackICE Jun 04 '15 at 19:00
1

@BlackICE don't click so fast then. Its a great answer! – SpoiledTechie.com Feb 16 '17 at 16:59
8

@SpoiledTechie.com tell my users and QA that – BlackICE Feb 17 '17 at 22:00

BENARD Patrick · Accepted Answer · 2019-04-08T16:00:07.033

12

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

edited Apr 08 '19 at 16:00

answered Mar 18 '14 at 13:29

BENARD Patrick

26,915
13
88
92

Yes,It cheks. But It doesn't works as collapse. As I told It have to collpase by checking checkbox. – Dj.Sunrise Mar 18 '14 at 13:44
@YenneInfo Can you please look at my question, it is almost the same as this one? http://stackoverflow.com/questions/22480524/twitter-bootstrap-3-collapse-when-checkbox-checked – bambi Feb 14 '15 at 17:11
1

@bambiinela share the link to your question please – BENARD Patrick Feb 14 '15 at 19:58
Sorry, I put wrong link. Here is my question: http://stackoverflow.com/questions/28517366/collapse-when-checkbox-checked-bootstrap – bambi Feb 14 '15 at 20:57
if you double click quickly on the checkbox the area will show, but the checkbox will be unchecked. – BlackICE Jun 04 '15 at 19:02
You can also check the box, expand it, then uncheck the box and it stays shown. – WolfieeifloW Jul 27 '18 at 13:31
@WolfieeifloW I suggest you to read the 'update' part... It resolves the issue you're talking... – BENARD Patrick Jul 27 '18 at 17:21

score 4 · Answer 3 · edited Jul 27 '18 at 13:46

4

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>

edited Jul 27 '18 at 13:46

WolfieeifloW

537
1
3
24

answered Nov 27 '16 at 10:15

Igor Mizak

1,039
1
10
19

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" – hello_earth Sep 06 '19 at 10:32

score 3 · Answer 4 · answered Apr 17 '15 at 17:16

3

Look at it. I did it and works fine.

<script> 
        $(function () {

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

</script>

answered Apr 17 '15 at 17:16

LegustasBR

31
1

score 1 · Answer 5 · edited Jul 27 '18 at 15:52

1

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/

edited Jul 27 '18 at 15:52

WolfieeifloW

537
1
3
24

answered Feb 28 '17 at 07:11

Ajay.R1008

37
10

score 0 · Answer 6 · answered Aug 21 '14 at 16:44

0

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.

answered Aug 21 '14 at 16:44

Hugo Tognolo

33
1

3

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. – digijim Apr 30 '15 at 22:10

score 0 · Answer 7 · answered Aug 20 '19 at 08:10

0

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

answered Aug 20 '19 at 08:10

Rolando

1

3

Welcome to StackOverflow. Try to explain more clearly why this is an answer to the question. – Jeroen Heier Aug 20 '19 at 08:16

score 0 · Answer 8 · answered Nov 30 '19 at 01:00

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/

Twitter Bootstrap 3 collapse when checkbox checked

8 Answers8

Linked