Hide and Show element HTML5
Ketika membuat halaman web, terkadang kita ingin menyembunyikan atau menampilkan bagian tertentu dari halaman web.
Dulu biasanya saya menggunakan fitur css style display none untuk menyembunyikan atau display block untuk menampilkan.
Tapi penggunaan css properti display none atau block saya dapati ada beberapa kekurangan
Beberapa hari yang lalu saya dapati cara lain, dan rasanya cocok dengan cara ini, yaitu dengan memanfaatkan css transform property.
merujuk ke w3schools.com mengenai penjelasan transform property
The transform property applies a 2D or 3D transformation to an element. This property allows you to rotate, scale, move, skew, etc., elements.
terjemahan bebasnya sebagai berikut:
Properti transform menerapkan transformasi 2D atau 3D ke elemen. Properti ini memungkinkan Anda untuk memutar, menskalakan, memindahkan, condong, dll.
nah dengan property transform ini kita gunakan untuk memindahkan posisi elemen yang ingin kita sembunyikan ke luar screen sehingga tak terlihat.
caranya pertama-tama kita buat didalam tag <style> atau didalam file .css kode berikut ini
<style>
.visible { transform: translateX(0); -webkit-transition: 0.5s; }
.hidden { transform: translateX(-100%); -webkit-transition: 0.5s; }
</style>
nah dengan demikian jika ada elemen dengan class yang bernama visible maka dia akan tampil dan jika ada elemen dengan class property hidden maka dia akan tersembunyi (keluar dari layar/screen hingga tak tampak)
Selanjutnya kita buat didalam tang <script> atau didalam file .js kode berikut ini (dengan asumsi elemen yang ingin kita hide atau show mempunyai id "targetnya" contoh:
<script>
function hideElemen() {
let x = document.getElementById('targetnya');
x.classList.toggle('hidden');
x.classList.remove('visible');
}
function showElemen(){
let x = document.getElementById('targetnya');
x.classList.toggle('visible');
x.classList.remove('hidden');
}
</script>
Nah setelah itu terserah Anda ingin memanggil fungsi show atau hide atau dengan gabungan keduanya, misalnya menggunakan if then else, jika dalam keadaan show maka dihide dan jika dalam keadaan hide maka dishow jika sembuah tomblo diklik misalnya, variasi selanjutnya setelah Anda
Nah cukup sekian tips singkat ini, semoga bermanfaat bagi yang buka usaha jasa pembuatan website atau mahasiswa atau siapapun yang berkepentingan 😊😊