group radio buttons and toggle input controls using jQuery
<p>I want to show textboxes of the selected radiobutton only. Currently it works as such. But the problem is that when I click on the textbox to type anything, then it will toggle. And also the radio button selection doesn;t change to current selection. Please find the detailed code below</p>

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"&gt;
&lt;/script&gt;
&lt;script&gt;
 $(document).ready(function()
 {
   $(".userid_textbox").hide();
   $(".userid").click(function()
   {
     var kid=$(this).children(".userid_textbox");
     var dad=$(this).parent();
     var toggledKid = $(dad).find('.toggle');
     $(kid).addClass("toggle").show('slow');
     $(toggledKid).hide('slow').removeClass('toggle');
   });
});
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div class="contentbox tp"&gt; 
&lt;h1 class="heading"&gt;Sites List&lt;/h1&gt; 
  &lt;div style="float:left;margin-right:185px;" class="userid"&gt; 
  &lt;input type="radio" id="" value="Search By UserId" checked/&gt;Search By UserId
  &lt;div class="userid_textbox"&gt; 
  &lt;input id="username" maxlength="50" name="username" style="width: 50%; 
    font-size: 25px;" tabindex="1" type="text" value="" /&gt; 
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;div style="float:left;margin-right:100px;display:inline;" class="userid"&gt; 
  &lt;input type="radio" id="" value="Search By Sitename"/&gt;Search By Sitename
  &lt;div class="userid_textbox"&gt; 
  &lt;input id="username2" maxlength="50" name="username1" style="width: 50%; 
    font-size: 25px;" tabindex="1" type="text" value="" /&gt; 
  &lt;/div&gt;
  &lt;/div&gt; 
  &lt;div style="float:left;margin-right:50px;display:inline;" class="userid"&gt; 
  &lt;input type="radio" id="" value="Search By Expiry date"/&gt;Search By 
    Expiry date
  &lt;div class="userid_textbox"&gt; 
  &lt;input id="username3" maxlength="50" name="username2" style="width: 50%; 
    font-size: 25px;" tabindex="1" type="text" value="" /&gt; 
  &lt;/div&gt;
  &lt;/div&gt;
  &lt;/div&gt; 
&lt;/body&gt;
&lt;/html&gt;
</code></pre>
