How to collapse a bootstrap accordion by clicking on it

Question

I have a bootstrap accordion with a flag inside each accordion panel. When I check the box inside the panel, its parent should collapse and open the next panel.

I am using jQuery icheck plugin for checkbox styles. So what can I do to reduce accordion panels? Fiddle

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

});

Answer 1

If you understand correctly, you may need something like this:

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/

, , !

Answer 2

-

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

: http://jsfiddle.net/Lq07ysbq/11/

Answer 3

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

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

At the top of my head, I can’t find a general solution to open the next panel, so a specific identifier is currently being used.