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

Question 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

Question 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

Question 3

use html5 data attribute)(i.e data-mappingclass ) pointing to corresponding div you need to show. add same class to all radio button(ie radioClass).

HTML

 <label><input type="radio" name="group1" class="radioClass sim-micro-btn" data-mappingclass="sim-micro-desktop"/></label>
 <label><input type="radio" name="group1" class="radioClass sim-mini-btn" data-mappingclass="sim-mini-desktop"/></label>
 ... //same for others

JS

$('.radioClass').click(function() {
  $('.billpay-internet-add-ons div').hide();
  if(this.checked){
     $('.' + $(this).data('mappingclass').show();
  }
});

Question 4

You could use selectors to reduce the number of lines of code here.

$('.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();

Could be shortened to:

$('.billpay-internet-add-ons div').hide();

This uses the parent element to group those elements you want to hide, rather than repeating the request for each one.

Similarly, you can use your naming convention to map the items to the elements to show and hide - here is the full working example:

$(document).ready(function(){
    $('.billpay-internet-add-ons div').hide();

    $('form#group').click(function(){
        $('#group input').each(function() {
            var item = $(this);
            var isChecked = item.is(':checked');
            var name = item.attr('class').replace("-btn", "-desktop");

            if (isChecked) {
                $('.' + name).show();
            } else {
                $('.' + name).hide();
            }
        });
    });
});

This example is purely based on your HTML without any changes. See it working here.

You could simplify this further if you didn't need to transform the names. You could use a data-attribute instead of changing the class names to do this.

Question 5

var $billpay= $('.billpay-internet-add-ons');
$billpay.find("div").hide();
$("#group input:radio").click(function(){
  $billpay.find("div").hide();
  $billpay.find("div:eq("+$(this).parent().index()+")").show();    
});

http://jsfiddle.net/KaF77/2/

Question 6

I simplified it some four you. Basically you look which index the radio clicked has and then show a div with the same index. So the position of the divs has to match the radios.

Your HTML is the same as before.

Your CSS:

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

All your Javascript:

$(document).ready(function(){
    $('form#group').click(function(e)
    {
        $('.billpay-internet-add-ons > div').hide();
        $('form#group input[type="radio"]').each(function(index)
        {
            if($(this).is(':checked'))
            {
                $('.billpay-internet-add-ons > div:eq(' + index + ')').show();
            }
        });
    });
});

jsFiddle Demo: http://jsfiddle.net/cfSXY/

Question 7

You can firstly have everything hidden by default (except one form maybe) using CSS, which gets rid of this:

$('.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();

This has a negative implication for users without javascript, if you're worried - they'll never be able to see the other forms.

Next, only one radio can be checked, so just find out which one it is using:

$('input[name=group1]:checked);

But why would you do that, so you have the radios have a click handler more like:

$('#group input[type="radio"').click(function(){
    //code to show/hide form
});

Now you have a choice as to how you link your radio buttons to the different forms one way could be to use the data attribute, so you define your radios like so:

<label><input type="radio" name="group1" class="phone-smart-maxi-btn" data-form="phone-smart-maxi-desktop"/></label>

Which you can access like so:

$('input[name=group1]:checked).data("form");

Now all you need to do is hide the div that was already showing, but that can be achieved with a similar use of the data attribute or by using the :visible selector.