Devil without a clue

Hiding a div based on a radio button

This is fairly easy. the radio group and divs:

<label>
<input type=”radio” name=”foobar” value=”foo” id=”foobar_0” class=”hide_foo”/>
foo
</label>
<label>
<input type=”radio” name=”foobar” value=”bar” id=”foobar_1” class=”hide_bar”/>
bar
</label>

<div class=”hide_foo” id=”foodiv”>I am foo.</div>
<div class=”hide_bar” id=”bardiv”>I am bar.</div>

and the jQuery:

$(document).ready(function(){
$(“.hide_foo:radio”).click(function(){
$(“div.hide_foo”).hide();
$(“div[class*=hide_]:not(.hide_foo)”).show();
});
$(“.hide_bar:radio”).click(function(){
$(“div.hide_bar”).hide();
$(“div[class*=hide_]:not(.hide_bar)”).show();
});
});

using the matching classes and the :radio selector I hook the click event to the radio buttons

What each event does is then hide the appropriate div, and then show all of the other divs with the hide_* class EXCEPT the one you want hidden.

this is done with the [attribute*=value] selector and then the :not(selector) modifier. doing it this way prevents all of the divs from flashing on screen for an instant.