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 :

<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>

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 :

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

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

.content {
    display: none;
}