If Radio Button is Selected Show Div - 8 Radio Buttons / 8 Divs - Can this be simplified?

Question

Basically, I want 8 radio buttons. And if one radio button is selected then a div is shown below. If another button is selected another div is shown. Only one div shown at a time and if no button selected (initially) then no divs shown.

This is my HTML which is fairly standard, I'm not trying to improve this for what I need.

<form id='group'>
    <label><input type="radio" name="group1" class="sim-micro-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mini-btn"/></label> 
    <label><input type="radio" name="group1" class="sim-maxi-btn"/></label>
    <label><input type="radio" name="group1" class="sim-mega-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-micro-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-mini-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-btn"/></label>
    <label><input type="radio" name="group1" class="phone-smart-maxi-btn"/></label>
</form>

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

However this is my script and it seems fairly hectic and I'm wondering before I move on is there a way to do this a bit more simple?

$(document).ready(function(){
    $('.sim-micro-desktop').hide();
    $('.sim-mini-desktop').hide();
    $('.sim-maxi-desktop').hide();
    $('.sim-mega-desktop').hide();
    $('.phone-smart-micro-desktop').hide();
    $('.phone-smart-mini-desktop').hide();
    $('.phone-smart-desktop').hide();
    $('.phone-smart-maxi-desktop').hide();


    $('form#group').click(function(){
        if($('.sim-micro-btn').is(":checked")){
            $('.sim-micro-desktop').show();
        } else {
            $('.sim-micro-desktop').hide();
        }     

        if($('.sim-mini-btn').is(":checked")){
            $('.sim-mini-desktop').show();
        } else {
            $('.sim-mini-desktop').hide();
        }     

        if($('.sim-maxi-btn').is(":checked")){
            $('.sim-maxi-desktop').show();
        } else {
            $('.sim-maxi-desktop').hide();
        }  

        if($('.sim-mega-btn').is(":checked")){
            $('.sim-mega-desktop').show();
        } else {
            $('.sim-mega-desktop').hide();
        }  

        if($('.phone-smart-micro-btn').is(":checked")){
            $('.phone-smart-micro-desktop').show();
        } else {
            $('.phone-smart-micro-desktop').hide();
        }  

        if($('.phone-smart-mini-btn').is(":checked")){
            $('.phone-smart-mini-desktop').show();
        } else {
            $('.phone-smart-mini-desktop').hide();
        }  

        if($('.phone-smart-btn').is(":checked")){
            $('.phone-smart-desktop').show();
        } else {
            $('.phone-smart-desktop').hide();
        }  

        if($('.phone-smart-maxi-btn').is(":checked")){
            $('.phone-smart-maxi-desktop').show();
        } else {
            $('.phone-smart-maxi-desktop').hide();
        }  

          });


});

Solution 1

Firstly put shared classes on both the radio buttons and the div elements which show the content. In my example I've used trigger and content respectively. Then add a data attribute to the radio to identify which div should be shown on click.

Shortened example:

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
</form>
<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
</div>

Then you only need 1 click handler like this:

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

You can also then use CSS to hide the div elements without jQuery - styling should always be done in CSS anyway as it's a much better separation of concerns.

.content {
    display: none;
}

Example fiddle

Solution 2

You can hide the div elements using CSS:

.billpay-internet-add-ons div {
  display: none;
}

Then you can use the className of the target to determine which div to show, hiding all sibling elements:

$('form#group').click(function(e) {
    var className = e.target.className.replace('btn', 'desktop');    
    $('.' + className).show().siblings().hide();
});

Here's a fiddle