jQuery show masquer divs sur les boutons radio

Question

J'ai un groupe de boutons radio qui, lorsqu'on clique dessus, doivent afficher une liste non ordonnée correspondante. J'ai aussi loin que montrer la liste correcte en fonction du bouton radio cliqué mais je n'arrive pas à comprendre comment cacher les autres listes qui doivent être cachées. Donc, si je clique sur le deuxième radion des avantages, alors le deuxième ul dépensera et les autres ul dépenseront.

Ceci est mon jQuery:

// hide all except first ul 
$('div.chevron ul').not(':first').hide(); 

// 
$('div.chevron > ul > li > input[name=benefits]').live('click',function() { 

    // work out which radio has been clicked 
    var $radioClick = $(this).index('div.chevron > ul > li > input[name=benefits]'); 
    var $radioClick = $radioClick + 1; 

    $('div.chevron > ul').eq($radioClick).show(); 

}); 

// trigger click event to show spend list 
var $defaultRadio = $('div.chevron > ul > li > input:first[name=benefits]') 
$defaultRadio.trigger('click'); 

Et ceci est mon HTML:

 <div class="divider chevron"> 
     <ul> 
      <li><strong>What benefit are you most interested in?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="firstBenefit" value="Dental" checked="checked" /> 
       <label for="firstBenefit">Dental</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="secondBenefit" value="Optical" /> 
       <label for="secondBenefit">Optical</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="benefits" id="thirdBenefit" value="Physiotherapy" /> 
       <label for="thirdBenefit">Physiotherapy, osteopathy, chiropractic, acupuncture</label> 
      </li> 
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Dental?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1a" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2a" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3a" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Optical?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1b" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2b" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3b" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <ul> 
      <li><strong>How much do you spend a year on Physiotherapy, osteopathy, chiropractic, acupuncture?</strong></li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate1c" value="£50" /> 
       <label for="rate1a">&pound;50</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate2c" value="£100" /> 
       <label for="rate2a">&pound;100</label> 
      </li> 
      <li> 
       <input type="radio" class="inlineSpace" name="spend" id="rate3c" value="£150" /> 
       <label for="rate3a">&pound;150</label> 
      </li>   
     </ul> 
     <label class="button"><input type="submit" value="View your quote" class="submit" /></label> 
    </div> 

J'ai essayé d'utiliser:

$('div.chevron > ul').not($radioClick).hide(); 

Mais cela a abouti à un mauvais résultat où toutes les listes où caché.

Merci d'avance.

Answer 1

Cela permet de masquer celui qui est actuellement visible .. (vous devez l'exécuter avant de montrer le nouveau cliqué ul)

$('div.chevron > ul:visible').hide(); 

Answer 2

merci. Je l'ai résolu avec:

 $('div.chevron > ul:visible').hide(); 
    $('div.chevron > ul:first').show(); 
    $('div.chevron > ul').eq($radioClick).show(); 

Je ne sais pas ce qu'il est, mais il me semble toujours trop compliquer des choses comme ça dans mon code lorsque la réponse est très simple.