jQuery : Memunculkan div setelah input radio dipilih

Oleh : Abah Razi

بسم الله الرحمن الرحيم

Kita dapat menggunakan opsi <b>data-rel</b> pada input bertype radio  untuk menentukan bagian div mana yang akan dimunculkan setelah opsi yang diberikan oleh input radio tersebut.

Contohnya tampak seperti berikut :

[code language=”html”]

<form id=’group’>
<label>
<input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
</label>
<label>
<input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
</label>
<label>
<input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
</label>
<label>
<input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
</label>
</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>
</div>

[/code]

Perhatikan ada tambahan trigger pada identitas class input radio dan content pada identitas class di div yang akan ditampilkan.

Kode jQuery-nya akan tampak seperti berikut :

[code language=”javascript”]

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

[/code]

Sementara, untuk menyembunyikan div, kita dapat melakukannya via CSS :

[code language=”css”]

.content {
display: none;
}

[/code]