I am trying to understand show/hide toggled from the value of a selected
radio button. I know this topic has been addressed here often, but I cannot
seem to apply other's answers.
I have a series of primary radio button groups. Each primary group has a
single associated secondary group. I want the secondary group to be hidden
on load, but then toggled if a specific primary radio button is chosen.
For example in the code below, I would like the secondary radio groups to
only appear if the value "3" is selected. Once the group is shown, if
another value is selected I would like like the secondary radio group to be
re-hidden. If it makes easier code, the value "3" will always be the value
to show any of the secondary groups.
This must be doable, but is beyond me. Thank you for your help!
HTML:
<p>SecondaryBox1 should be hidden until PrimaryBox1 is selected as value
3, then toggled if PrimaryBox1 is something other than 3 </p>
<div id="PrimaryBox1">
<fieldset>
<input name="MainStuffQ1" type="radio" value="1" /> 1
<input name="MainStuffQ1" type="radio" value="2" /> 2
<input name="MainStuffQ1" type="radio" value="3" /> 3
</fieldset>
</div>
<div id="SecondaryBox1">
<fieldset>
<input name="SecondaryStuffQ1" type="radio" value="a" /> a
<input name="SecondaryStuffQ1" type="radio" value="b" /> b
<input name="SecondaryStuffQ1" type="radio" value="c" /> c
<input name="SecondaryStuffQ1" type="radio" value="d" /> d
</fieldset>
</div>
<p>SecondaryBox2 should be hidden until PrimaryBox2 is selected as value
3, then toggled if PrimaryBox2 is something other than 3 </p>
<div id="PrimaryBox2">
<fieldset>
<input name="MainStuffQ2" type="radio" value="1" /> 1
<input name="MainStuffQ2" type="radio" value="2" /> 2
<input name="MainStuffQ2" type="radio" value="3" /> 3
</fieldset>
</div>
<div id="SecondaryBox2">
<fieldset>
<input name="SecondaryStuffQ2" type="radio" value="a" /> a
<input name="SecondaryStuffQ2" type="radio" value="b" /> b
<input name="SecondaryStuffQ2" type="radio" value="c" /> c
<input name="SecondaryStuffQ2" type="radio" value="d" /> d
</fieldset>
</div>
--
View this message in context:
http://www.nabble.com/Hide-or-show-div-depending-on-the-value-of-radio-button-tp21802059s27240p21802059.html
Sent from the jQuery General Discussion mailing list archive at Nabble.com.
