How to Collapse bootstrap accordion by click check box inside it

Question

I have a Bootstrap Accordion with a check box inside each of the accordion panel. When I check the checkbox inside of a panel, its parent should collapse and the next panel should open.

I am using the jQuery icheck plugin for styling checkboxes. So what I can do to make the accordion panels collapse? FIDDLE

$('.item1').on('ifChecked', function(event){

});

Answer 1

If I understood you correctly, you might want something like that:

Updated code:

// Toggle
$('.item1').on('ifChecked', function(event){
    $("#collapseOne").collapse("hide");
});
$('.item2').on('ifChecked', function(event){
    $("#collapseTwo").collapse("hide");
});
$('.item3').on('ifChecked', function(event){
    $("#collapseThree").collapse("hide");
});

$("#collapseOne").on("hidden.bs.collapse", function(e){
    $("#collapseTwo").collapse("show");
});
$("#collapseTwo").on("hidden.bs.collapse", function(e){
    $("#collapseThree").collapse("show");
});
$("#collapseThree").on("hidden.bs.collapse", function(e){
    $("#collapseOne").collapse("show");
});

First fiddle here: http://jsfiddle.net/sap1ruq2/1/

UPDATED fiddle here: http://jsfiddle.net/bstjmdLp/

Let me know if this was what you needed!

Answer 2

You could do something like this in your case

$('input').on('ifChecked', function(event){
    $(this).parents('.panel').first().next().find('.panel-heading a').click();
});

Updated with a fiddle: http://jsfiddle.net/Lq07ysbq/11/

Answer 3

Ideally you should use the JS API provided by the plug-in. In this case, use 'hide' and 'show' options (http://getbootstrap.com/javascript/#collapse). I've updated your fiddle here: http://jsfiddle.net/catalyst156/Lq07ysbq/13/

$('.item1').on('ifChecked', function(event){
    $(this).parents('.panel-collapse').collapse('hide');
    $('#collapseTwo').collapse('show');
});

Off the top of my head, I can't come up with a general solution for opening the next panel so for now, the specific id is used.