Display hidden content when radio button is checked using JQuery

Question

I have two check-boxes

ABC
XYZ

when ABC is checked i'm showing abc content div and when XYZ is checked i'm showing xyz content div

everything works great only when i click on ABC and XYZ radio buttons suppose if by default ABC radio button is checked abc content div is not displaying only on clicking i'm getting content of it

my requirement is when radio button is checked i should get hidden content of that particular checked radio button not on clicking

can somebody help me out in achieving it

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();
});

Answer 1

You need to get the rel value of checked radio thus use :checked selector

$('.trigger').change(function () {
    $('.content').hide();
    $('.' + $('.trigger:checked').data('rel')).show();
}).change(); //Show content on page load

Fiddle

Thanks @tushar With some structure change you can achieve it using pure CSS.

You can use :checked to select the checked radio button and sibling selector + to select the next span and input siblings and use display: block; on them to show.

.content {
  display: none;
}
input:checked + span,
input:checked + input {
  display: block;
}

<form id='group'>
  <div>
    <label>
      <input type="radio" name="group1" class="trigger" data-rel="abc" checked />ABC
      <span class="abc content">
        <span>I belong to ABC</span>
      <input type="button" value="ABC" />
      </span>
    </label>
  </div>
  <br>
  <div>
    <label>
      <input type="radio" name="group1" class="trigger" data-rel="xyz" />XYZ
      <span class="xyz content">
        <span>I belong to XYZ</span>
      <input type="button" value="XYZ" />
      </span>
    </label>
  </div>
</form>

Answer 2

just Remove .change(); from your JS

$('.trigger').change(function () {
    $('.content').hide();
    $('.' + $('.trigger:checked').data('rel')).show();
});

Your updated Fiddle