accordion - jQuery Accordian that needs to open / close with tick boxes, and stay open if box is ticked -


little needed if possible. think i'm close can't quite figure out. title says, need have few tickboxes, if box ticked accordion effect kick in , reveal textarea.

if box ticked, need accordion stay open.

if box un-ticked, need accordion close up.

html ` solid foundations (the wheel)

where compliant no further comment necessary. not yet compliant please provide more information.

                        <div class="checkbutton two">                             <label><input type="checkbox" />getting grips governance (the wheel)</label>                                                 </div><!--checkbutton-->                         <div class="textareaaccordion two">                             <p><span class="helptext">where compliant no further comment necessary. not yet compliant please provide more information.</span></p>                             <textarea name="" cols="10" rows="3" id="explanatorytext"></textarea>                         </div>                          <div class="checkbutton three">                             <label><input type="checkbox" />reducing risk (the wheel)</label>                                                </div><!--checkbutton-->                         <div class="textareaaccordion three">                             <p><span class="helptext">where compliant no further comment necessary. not yet compliant please provide more information.</span></p>                             <textarea name="" cols="10" rows="3" id="explanatorytext"></textarea>                         </div>` 

js

<script type="text/javascript">                     $(document).ready(function() {                         //accordion button action (on click following)                         $('.checkbutton.one, .checkbutton.two, .checkbutton.three, .checkbutton.four, .checkbutton.five, .checkbutton.six, .checkbutton.seven, .checkbutton.eight, .checkbutton.nine').click(function() {                          if($(this).next().is(':hidden') == true) {                         //add on class button                         $(this).addclass('on');                         //open slide                         $(this).next().slidedown('normal');                         }                       });                         /**closes s on page load**/                     $('.textareaaccordion.one, .textareaaccordion.two, .textareaaccordion.three, .textareaaccordion.four, .textareaaccordion.five, .textareaaccordion.six, .textareaaccordion.seven, .textareaaccordion.eight, .textareaaccordion.nine').hide();});                 </script> 

thanks in advance!

firstly, take out:

$('.textareaaccordion.one, .textareaaccordion.two, .textareaaccordion.three, .textareaaccordion.four, .textareaaccordion.five, .textareaaccordion.six, .textareaaccordion.seven, .textareaaccordion.eight, .textareaaccordion.nine').hide(); 

i use css hide div tags.

secondly, don't have reference each of them individually, $('.textareaaccordion').hide(); suffice.

here solution: http://jsbin.com/egude4/22/edit


Comments

Popular posts from this blog

python - Scipy curvefit RuntimeError:Optimal parameters not found: Number of calls to function has reached maxfev = 1000 -

c# - How to add a new treeview at the selected node? -

java - netbeans "Please wait - classpath scanning in progress..." -