Question

I have an Html code as such

<li>
    <ul>
       <li id="6"><input type="radio" name="sell" value="sell" id="sell" />Sell</li>
       <li id="7"><input type="radio" name="rent" value="rent" id="rent" />Rent</li>
       <li id="8"><input type="radio" name="donate" value="donate" id="donate" />Donate</li>
     </ul>


     <div id="selltab" style="display:none;">
        eeeeeeeee
    </div>
    <div id="renttab" style="display:none;">
       ffffffffff
   </div>
   <div id="donatetab" style="display:none;">
   ggggggggg
   </div>

</li>

I need to show each div only while clicking the corresponding radio button, else it should be hidden. Right now I have written a JavaScript, but its not working properly:

$(document).ready(function(){
$("radio[@name='sell']").click(function(){

    if ($("radio[@name='sell']:checked").val() == 'sell')
        $("#selltab").css("display","block");

});

});

This was written to test whether selltab can be shown when clicking radio button of value sell, but seems to have some mistake somewhere.

Answer 1

By using toggle function you can do it.

$('#selltab').hide();
$('#renttab').hide();

$('input[name=sell]').click(function(){
   $('#selltab').toggle();
})
$('input[name=rent]').click(function(){
    $('#renttab').toggle();
})