For Loving You

Tombol Buka Tutup Pada AMP HTML

Sebenarnya AMP HTML juga sudah menyediakan sortcode toggleVisibility yang mempunyai fungsi untuk membuka dan menutup atau menutup dan membuka suatu element tertentu. Seperti Contoh dibawah ini:

Sortcode toggleVisibility

Kodenya


			<button on="tap:buktup.toggleVisibility">Buka OK Tutup OK</button>
<div id="buktup" hidden>
Ciluuuk Baaaaa...
</div>

Hasilnya

Namun bagi saya tombol diatas terlihat agak kurang indah, karena teks Buka dan Tutup pada tombol diatas terlalu panjang untuk menjelaskan bahwa tombol tersebut berfungsi untuk membuka element yang sebelumnya dalam keadaan tertutup dan untuk menutup element yang sebelumnya dalam keadaan terbuka.

Yang saya kehendaki agar lebih indah yaitu ketika element dalam keadaan tertutup maka teks pada tombol bertuliskan "Buka" dan ketika element dalam keadaan terbuka maka teks pada tombol bertuliskan "Tutup".

Ilustrasi yang saya jelaskan diatas maka dapat dibuat dengan memanfaatkan sortcode AMP HTML show dan hide, dibawah ini adalah kode dasar dari sortcode show dan hide:

Sortcode Show

Kodenya


			<button on="tap:buka.show">Show</button>
<div id="buka" hidden>
Ciluuuk Baaaaa...
</div>

Hasilnya

Sortcode Hide

Kodenya


			<button on="tap:tutup.hide">Tutup</button>
<div id="tutup">
Baaaaa Ciluuuk...
</div>

Hasilnya

Baaaaa Ciluuuk...

Disini sebenarnya saya akan menjelaskan prosesnya, dari dua susunan kode kode diatas sehingga menjadi seperti yang kita kehendaki, namun berhubung sudah capek ngetiknya (suatu saat akan saya update) maka langsung saja menuju hasilnya dibawah ini.

Sortcode Kombinasi Show dan Hide

Kodenya


			<button id='buka' on='tap:buktup.show, buka.hide, tutup.show'>Buka</button>
<button hidden='' id='tutup' on='tap:buktup.hide, buka.show, tutup.hide'>Tutup</button>
<div id="buktup" hidden>
Ciluuuk Baaaaa Ciluuuk...
</div>

Hasilnya

Selamat mencoba.

Related Post

For Loving You

For Loving You atau yang disingkat menjadi FLY adalah weblog yang menggunakan CMS dari Blogger.

Weblog ini berisi berbagai hal yang meliputi tentang Internet, Cinta, Bollywood, Keislaman, Pesantren dan lain sebagainya.