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
Post a Comment