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

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -