Tabbed nav with radios

Question

<label><input type="radio" name="group1" selected="selected" /> one </label>
<label><input type="radio" name="group1" /> two </label>

<fieldset id="one"> one </fieldset>
<fieldset id="two"> two </fieldset>

I'd like to show one fieldset at a time based on the radio selected. I know how to do with <a>s but radios seem difficult.

Thanks for your help

Answer 1

You can give them a common class, like this:

<fieldset id="one" class="sets"> one </fieldset>
<fieldset id="two" class="sets"> two </fieldset>

Then give the radio buttons matching values to the IDs, like this:

<label><input type="radio" name="group1" checked="checked" value="one" /> one </label>
<label><input type="radio" name="group1" value="two" /> two </label>

Then rig up and onchange event, like this:

$(function() {
  $("input[name=group1]").change(function() {
    $(".sets").hide();            //hide them all
    $("#" + this.value).show();   //show the one you clicked
  }).filter(':checked').change();                    //show the appropriate one on load
});

You can give it a try here, all this does is every time a change happens, hide all the <fieldset> elements with that class, then show only the one with the corresponding ID.