Making content appears using radio and checked attribute

Question

I have this four radio buttons which successfully works with a jQuery command that makes a specific div appears when selected!

However, I placed the checked attribute in order to have a specific option checked when the page loads, but my intention is making the content hidden get visible along with. The content only get visible when clicked and not when checked!

Check my HTML below:

<form id='group'>
  <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
  <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" checked />
  <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
  <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
</form>

<div class="billpay-internet-add-ons">
<div class="sim-micro-desktop content">sim-micro</div>
<div class="sim-mini-desktop content">sim-mini</div>
<div class="sim-maxi-desktop content">sim-maxi</div>
<div class="sim-mega-desktop content">sim-mega</div>

And the jQuery:

$('.trigger').click(function() {
    $('.content').hide();
    $('.' + $(this).data('rel')).show();
});

Thank you!
JSFiddle

Answer 1

You probably need something along these lines:

$(document).ready(function(){
    $("#group input:checked").trigger("click");
});