Javascript | Menyembunyikan dan Menampilkan Elemen

Published on November 26, 2024 by Putra Jaya

Menyembunyikan dan menampilkan elemen

Menyembunyikan dan menampilkan elemen

Struktur Html

<!DOCTYPE html>
<html>
<head>
    <title>01 Menampilkan Dan Menyembunyikan Elemen</title>
    <!--=| CSS dan JavaScript |=-->
    <link rel="stylesheet" href="styles.css">
    <script src="script.js" defer></script>
</head>
<body>

    <!--=| Tombol untuk Menampilkan dan Menyembunyikan |=-->
    <button id="tampil">Tampilkan Elemen</button>

    <!--=| Konten yang Ingin Ditampilkan atau Disembunyikan |=-->
    <div id="konten">
        <p>Ini adalah konten yang bisa ditampilkan dan disembunyikan.</p>
    </div>

</body>
</html>

CSS

/* Konten default disembunyikan */
#konten{
    display: none;
}

JavaScript

document.getElementById('tampil').addEventListener('click', function () {
    const konten = document.getElementById('konten');

    if (konten.style.display === 'none') {
        konten.style.display = 'block';
    } else {
        konten.style.display = 'none';
    }
});

Apa Fungsi Kode Ini?

Kode ini membuat tombol (atau elemen dengan id="tampil") dapat digunakan untuk menampilkan atau menyembunyikan elemen lain (dengan id="konten") melalui mekanisme toggle. Jadi, ketika elemen dengan id="tampil" diklik:

Jika elemen konten tersembunyi, maka elemen akan muncul.
Jika elemen konten terlihat, maka elemen akan disembunyikan.

Bagaimana Cara Kerjanya?

Ambil Elemen Berdasarkan ID
```
document.getElementById('tampil')
```
Baris ini mencari elemen dengan id="tampil" di dalam dokumen HTML. Metode document.getElementById mengembalikan referensi ke elemen tersebut sehingga JavaScript bisa mengendalikannya.
Tambahkan Event Listener
```
.addEventListener('click', function() { ... })
```
Bagian ini menambahkan pendengar (listener) untuk mendeteksi apakah elemen tampil diklik. Jika ada event klik ('click'), JavaScript akan menjalankan fungsi yang ada di dalamnya (function(){...}).
Ambil Elemen konten
```
const konten = document.getElementById('konten');
```
Di dalam fungsi, kita mengambil elemen lain dengan id="konten" agar bisa diatur properti tampilannya.
Cek Properti style.display
```
if (konten.style.display === 'none') { ... }
```
Properti style.display digunakan untuk mengontrol tampilan elemen di CSS:
- 'none' berarti elemen tidak terlihat (disembunyikan).
- 'block' berarti elemen terlihat (biasanya dalam bentuk blok).
Di sini, kita memeriksa apakah elemen konten disembunyikan (style.display === 'none'). Jika iya, maka kita membuatnya terlihat (konten.style.display = 'block').
Ganti Status Tampil/Sembunyi
```
if (konten.style.display === 'none') {
    konten.style.display = 'block';
} else {
    konten.style.display = 'none';
}
```
Jika elemen tersembunyi, tampilkan dengan display = 'block'. Sebaliknya, jika elemen terlihat, sembunyikan dengan display = 'none'.

Kenapa Bisa Bekerja?

JavaScript DOM (Document Object Model) memungkinkan kita untuk mengakses dan memanipulasi elemen HTML melalui kode.
Event Listener memonitor interaksi pengguna (dalam hal ini, klik), lalu mengeksekusi kode saat event terjadi.
CSS Property display menentukan apakah elemen terlihat di halaman atau tidak.

Contoh HTML untuk Kode Ini

<button id="tampil">Tampilkan/Sembunyikan</button>
<div id="konten" style="display: none;">
    Ini adalah konten yang akan ditampilkan atau disembunyikan.
</div>

Kenapa Menarik?

Kode ini sederhana tapi sangat berguna untuk fitur interaktif seperti:

Tombol “Lihat Selengkapnya”.
Menu dropdown.
Menyembunyikan dan menampilkan bagian tertentu dari halaman tanpa memuat ulang.

Selamat Datang di Dunia Aneh Saya! 🤪

Siapa Saya? (Spoiler: Bukan Superhero) 🦸‍♂️

Hai, saya adalah seorang pembelajar web yang selalu merasa seperti seorang ilmuwan gila! Saya nggak bisa berhenti mencatat hal-hal keren dan random yang saya pelajari setiap hari. Website ini adalah tempat saya menulis catatan belajar yang sepertinya hanya saya yang paham, tapi tetap saja saya harap kalian bisa menemukan sesuatu yang bermanfaat di sini. Di setiap sudut situs ini, kalian akan menemukan berbagai macam eksperimen—dari coding yang terasa seperti sihir, sampai penemuan aneh yang muncul dari inspirasi saat tengah malam, yang mungkin hanya saya yang mengerti. Bisa dibilang, ini adalah dunia saya, tempat saya menggabungkan kreativitas, kegilaan, dan sedikit logika yang mungkin kadang hilang begitu saja 😆.

Apa Tujuan Website Ini? (Selain Menjadi Tempat Membuang Waktu) 🕒

Tujuan utama website ini adalah untuk merekam perjalanan belajar saya yang penuh warna—tapi dengan gaya yang sangat bebas! Saya suka kebebasan dalam segala hal, termasuk dalam mencatat dan belajar. Jadi, jangan kaget kalau tiba-tiba kalian menemukan sesuatu yang super terstruktur dan rapi, lalu selanjutnya malah menemukan catatan yang seolah-olah ditulis oleh seorang alien. Website ini adalah tempat saya melepaskan semua ide gila yang tiba-tiba muncul, meski terkadang bisa berubah drastis dari satu topik ke topik lainnya. Ini adalah eksperimen berkelanjutan tentang apa yang bisa saya pelajari, apa yang menarik minat saya, dan bagaimana saya bisa memecah rutinitas sehari-hari. Saya tidak ingin website ini hanya menjadi tempat belajar yang biasa, tapi juga tempat saya untuk berkreasi dan menemukan hal baru setiap hari! Jadi, jika kalian merasa kontennya nggak sesuai dengan yang kalian harapkan, yaa, itu mungkin karena saya baru saja mendapat ide baru yang lebih menyenangkan 🌟.

Kenapa Konten Bisa Berubah-ubah? (Karena Saya Mood-nya Cepat Berganti) 😜

Karena website ini adalah dunia milik saya, saya merasa bebas untuk mengubah-ubah isinya sesuai dengan apa yang sedang saya pelajari atau minati pada saat itu. Kadang saya bisa jadi sangat serius dan memikirkan konsep pengembangan web yang sangat mendalam—lalu tiba-tiba berubah jadi cerita tentang eksperimen aneh yang tidak ada hubungannya dengan coding. Jadi, jika kalian menemui halaman yang terasa super teknis di satu waktu dan kemudian menemukan halaman penuh dengan hal-hal random yang menggelikan pada waktu lain, itu karena saya, pembelajar yang mood-nya cepat berubah!. Website ini tidak mengikuti aturan baku atau standar lainnya—itu adalah catatan pribadi saya yang terus berkembang, dan jika saya merasa ingin mengubah desain atau menulis tentang hal-hal yang tidak terduga, ya saya akan melakukannya tanpa ragu! Mungkin nanti saya akan menulis tentang hal-hal seperti bagaimana memprogram robot untuk memasak mie instan, siapa yang tahu? Yang pasti, website ini adalah tempat yang penuh kejutan!