Question

the html structure:

<div id="test">
   <form>
   <input type="radio" name="content"  class="s_code" checked="checked" /><span>code</span>
    <input type="radio" name="content"  class="s_book" /><span>book</span>
    </form>
   </div>
 <div class="contenta">
 <a href="one/letter_A_1.html">A</a>

<a href="two/letter_B_1.html">B</a>

<a href="three/letter_C_1.html">C</a>

<a href="four/letter_D_1.html">D</a>
</div>
 <div class="contentb">
 <a href="1/letter_A_1.html">A</a>

<a href="2/letter_B_1.html">B</a>

<a href="3/letter_C_1.html">C</a>

<a href="4/letter_D_1.html">D</a>
</div></div>

now, is there a way to get when i checked the book radio, the contentb showing. the contenta is hidden. the default shows is contenta.

Answer 1

You can use toggle, this way you can add more sections if you need to. If you have over 5 sections, I would NOT use this method.

$('.s_code, .s_book').change(function() {
    $('.contenta').toggle($(this).hasClass('s_code'));
    $('.contentb').toggle($(this).hasClass('s_book'));
});