I am dealing with two checkboxes
ABC
XYZ
When the ABC checkbox is checked, the abc content div is displayed, and when the XYZ checkbox is checked, the xyz content div is shown.
Everything works fine, except that if the ABC checkbox is checked by default, the abc content div is not displayed until clicked.
My goal is to have the hidden content of the checked radio button displayed when the radio button is checked, not just on click.
Can anyone assist me in accomplishing this?
http://jsfiddle.net/Qac6J/497/
HTML
<form id='group'>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC
</label>
<span class="abc content">
<label>
<span>I belong to ABC</span>
<input type="button" value="ABC"/>
</label>
</span>
</div>
<br>
<div>
<label>
<input type="radio" name="group1" class="trigger" data-rel="xyz"/>XYZ
</label>
<span class="xyz content">
<label>
<span>I belong to XYZ</span>
<input type="button" value="XYZ"/>
</label>
</span>
</div>
</form>
CSS
.content
{
display: none;
}
JQuery
$('.trigger').change(function()
{
$('.content').hide();
$('.' + $(this).data('rel')).show();
});