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 :
01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 | <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 :
1 2 3 4 | $('.trigger').click(function() { $('.content').hide(); $('.' + $(this).data('rel')).show();}); |
Sementara, untuk menyembunyikan div, kita dapat melakukannya via CSS :
1 2 3 | .content { display: none;} |
Leave a Reply