Question

Little help needed if possible. I think I’m close just can’t quite figure it out. Basically as the title says, I need to have a few tickboxes, if a box is ticked an accordion effect will kick in and reveal a textarea.

If the box is ticked, I need the accordion to stay open.

If the box is then un-ticked, I need the accordion to close up.

HTML
`
Solid Foundations (The Wheel)

Where you are fully compliant no further comment is necessary. Where you are not yet fully compliant please provide more information.

                        <div class="CheckButton two">
                            <label><input type="checkbox" />Getting to Grips With Governance (The Wheel)</label>                        
                        </div><!--checkButton-->
                        <div class="TextareaAccordion two">
                            <p><span class="helptext">Where you are fully compliant no further comment is necessary. Where you are not yet fully 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 the Risk (The Wheel)</label>                       
                        </div><!--checkButton-->
                        <div class="TextareaAccordion three">
                            <p><span class="helptext">Where you are fully compliant no further comment is necessary. Where you are not yet fully 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 DO THE 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 THE ON CLASS TO THE BUTTON
                        $(this).addClass('on');
                        //OPEN THE SLIDE
                        $(this).next().slideDown('normal');
                        } 

                    });




                    /**CLOSES ALL 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!

Answer 1

Firstly, I would take this out:

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

I would simply use CSS to hide those div tags.

Secondly, you don’t have to reference each of them individually, $('.TextareaAccordion').hide(); would suffice.

Here is my solution: http://jsbin.com/egude4/22/edit