2011-02-09 64 views
0

如果可能的话,需要帮助。我觉得我很接近,不能完全弄明白。基本上如标题所示,我需要有几个勾选框,如果勾选了一个框,手风琴效果将会启动并显示一个textarea。jQuery Accordian需要用勾号框打开/关闭,并且在勾选框时保持打开状态

如果选中该框,我需要手风琴保持打开状态。

如果盒子没有打勾,我需要手风琴关闭。

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> 

提前感谢!

回答

0

首先,我想借此出:

$('.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

+0

嗨Anriëtte,谢谢你的回复。好吧,我想我明白了。基本上每个带隐藏文本区域的复选框必须是它自己的独立手风琴。这是因为如果打开一个,然后单击另一个,则会关闭前一个。如果每个手风琴都是自己独立的手风琴,那么它们都可以开放,或者如果需要的话都可以关闭。 – davejfox 2011-02-09 14:10:18