javascript - How to Collapse bootstrap accordion by click check box inside it - Stack Overflow

admin管理员组

文章数量:1391925

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

});

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

});

• javascript
• jquery
• twitter-bootstrap
• icheck

Share Improve this question Follow edited Nov 13, 2014 at 14:41 alex 7,5081111 gold badges6060 silver badges113113 bronze badges asked Nov 13, 2014 at 14:23 RaihanRaihan 4,03133 gold badges2525 silver badges4141 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

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/sap1ruq2/1/

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

Let me know if this was what you needed!

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/Lq07ysbq/11/

Ideally you should use the JS API provided by the plug-in. In this case, use 'hide' and 'show' options (http://getbootstrap./javascript/#collapse). I've updated your fiddle here: http://jsfiddle/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 e up with a general solution for opening the next panel so for now, the specific id is used.

本文标签： javascriptHow to Collapse bootstrap accordion by click check box inside itStack Overflow