javascript - Twitter Bootstrap 3 collapse when checkbox checked -
accordion have collapse on checked checkbox. , must hidden when it's uncheked.
here code : http://jsfiddle.net/uwl5l/2/
why 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=""> 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>
fiddle : http://jsfiddle.net/h44pj/
js :
$('.collapse').collapse(); // don't collapse on checkbox click $('.panel-heading h4 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 input[type=checkbox]').is(':checked') ) { return false; } }); update :
$('.collapse').collapse(); $('.panel-heading h4 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 input[type=checkbox]').is(':checked') ) { return false; } });
Comments
Post a Comment