jQuery Accordian, который должен открываться / закрываться с помощью флажков и оставаться открытым, если отмечен флажок - PullRequest
Новая
       2

jQuery Accordian, который должен открываться / закрываться с помощью флажков и оставаться открытым, если отмечен флажок

0 голосов
/ 09 февраля 2011

Маленькая помощь нужна, если это возможно.Я думаю, что я близко, просто не могу понять это.В основном, как гласит заголовок, мне нужно иметь несколько флажков, если флажок отмечен, эффект аккордеона включится и покажет текстовую область.

Если флажок отмечен, мне нужен аккордеон, чтобы оставаться открытым

Если флажок снят, мне нужно закрыть аккордеон.

HTML `Твердые основания (Колесо)

Там, где вы полностью соответствуете требованиям, больше неткомментарий необходим.Если вы еще не полностью соблюдаете требования, предоставьте дополнительную информацию. 

                        <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>

Заранее спасибо!

1 Ответ

0 голосов
/ 09 февраля 2011

Во-первых, я бы вынул это: 

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

Я бы просто использовал CSS, чтобы скрыть эти div теги.

Во-вторых, вам не нужно ссылаться на каждого из них по отдельности, достаточно $('.TextareaAccordion').hide();.

Вот мое решение: http://jsbin.com/egude4/22/edit

...