CODEWITHSUNDEEP
javascriptjqueryjquery-events
Nabe
Nabe

Reputation: 95

Displaying div on Radio Button click only

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.

Upvotes: 0

Views: 1276

Answers (2)

jazzytomato
jazzytomato

Reputation: 7239

I think this is what you want : http://jsfiddle.net/Wsg3q/

<form>
  <input type="radio" name="group" value="sell" id="sell" /> sell <br/>
  <input type="radio" name="group" value="rent" id="rent" /> rent <br/>
  <input type="radio" name="group" value="donate" id="donate" /> donate <br/>
</form>

<div id="selltab" >
   eeeeeeeee
</div>
<div id="renttab" >
   ffffffffff
</div>
<div id="donatetab" >
   ggggggggg
</div>

Javascript :

$('div').hide();

$("input[name=group]:radio").change(function() {
     $( '#' + $(this).attr('id') + 'tab' ).show();
    $('div:not(#' + $(this).attr('id') + 'tab)' ).hide();
});
​

​

Upvotes: 2

chella
chella

Reputation: 164

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();
})

Upvotes: 3

Related Questions