HTML Dasar #30 - Menampilkan/Menyembunyikan Elemen dengan JavaScript

Setelah kita belajar event klik (onclick), sekarang saatnya mengenal cara menampilkan dan menyembunyikan elemen dengan JavaScript. Ini adalah teknik yang sangat berguna untuk membuat dropdown menu, modal popup, tab panel, accordion, loading spinner, pesan error, dan banyak komponen interaktif lainnya.

---

Dua Cara Menyembunyikan Elemen

Ada dua properti CSS yang bisa diatur dengan JavaScript untuk menyembunyikan elemen, dengan perilaku yang berbeda:

Properti	Cara Menyembunyikan	Cara Menampilkan	Perilaku
display	element.style.display = "none"	element.style.display = "block" (atau "flex", "inline-block")	Elemen hilang sepenuhnya (tidak memakan tempat)
visibility	element.style.visibility = "hidden"	element.style.visibility = "visible"	Elemen tidak terlihat tapi masih memakan tempat (ada ruang kosong)

Perbedaan Utama:
- display: none → elemen benar-benar hilang dari layout. Elemen lain akan mengisi posisinya.
- visibility: hidden → elemen tidak terlihat tapi tetap memakan tempat. Elemen lain tidak bisa mengisi posisinya.

1. Menyembunyikan Elemen dengan display: none

Cara ini paling umum digunakan karena elemen benar-benar hilang dan tidak mempengaruhi layout.

Contoh Dasar:

<button id="sembunyiBtn">Sembunyikan Teks</button>
<button id="tampilBtn">Tampilkan Teks</button>
<p id="teksRahasia">Ini adalah teks rahasia yang bisa disembunyikan!</p>

<script>
    const sembunyi = document.getElementById("sembunyiBtn");
    const tampil = document.getElementById("tampilBtn");
    const teks = document.getElementById("teksRahasia");
    
    sembunyi.addEventListener("click", function() {
        teks.style.display = "none";
    });
    
    tampil.addEventListener("click", function() {
        teks.style.display = "block";
    });
</script>

Hasilnya:

Ini adalah teks rahasia yang bisa disembunyikan!

Contoh Tombol Toggle (Sembunyikan/Tampilkan dengan satu tombol):

<button id="toggleBtn">Sembunyikan</button>
<div id="konten">
    <p>Konten yang bisa disembunyikan dan ditampilkan.</p>
    <p>Coba klik tombol di atas!</p>
</div>

<script>
    const toggleBtn = document.getElementById("toggleBtn");
    const konten = document.getElementById("konten");
    let tersembunyi = false;
    
    toggleBtn.addEventListener("click", function() {
        if (tersembunyi) {
            konten.style.display = "block";
            toggleBtn.textContent = "Sembunyikan";
            tersembunyi = false;
        } else {
            konten.style.display = "none";
            toggleBtn.textContent = "Tampilkan";
            tersembunyi = true;
        }
    });
</script>

Hasilnya:

Konten yang bisa disembunyikan dan ditampilkan.

Coba klik tombol di atas!

2. Menyembunyikan Elemen dengan visibility: hidden

Cara ini membuat elemen tidak terlihat tapi tetap memakan tempat. Cocok untuk situasi di mana kita ingin mempertahankan layout.

Contoh Perbedaan display vs visibility:

<div style="display: flex; gap: 20px;">
    <div>
        <button id="sembunyiDisplay">Sembunyikan (display)</button>
        <div id="kotakDisplay" style="width: 150px; height: 100px; background: #3b82f6; margin-top: 10px;"></div>
        <p>Kotak di atas hilang & tidak memakan tempat</p>
    </div>
    <div>
        <button id="sembunyiVisibility">Sembunyikan (visibility)</button>
        <div id="kotakVisibility" style="width: 150px; height: 100px; background: #22c55e; margin-top: 10px;"></div>
        <p>Kotak di atas tidak terlihat tapi masih ada ruang</p>
    </div>
</div>
<button id="resetSemua">Reset Semua</button>

<script>
    const sembunyiDisplay = document.getElementById("sembunyiDisplay");
    const sembunyiVisibility = document.getElementById("sembunyiVisibility");
    const resetSemua = document.getElementById("resetSemua");
    const kotakDisplay = document.getElementById("kotakDisplay");
    const kotakVisibility = document.getElementById("kotakVisibility");
    
    sembunyiDisplay.addEventListener("click", function() {
        kotakDisplay.style.display = "none";
    });
    
    sembunyiVisibility.addEventListener("click", function() {
        kotakVisibility.style.visibility = "hidden";
    });
    
    resetSemua.addEventListener("click", function() {
        kotakDisplay.style.display = "block";
        kotakVisibility.style.visibility = "visible";
    });
</script>

Hasilnya:

Kotak di atas hilang dan tidak memakan tempat

Kotak di atas tidak terlihat tapi masih ada ruang

Kapan Menggunakan display: none vs visibility: hidden?
- Gunakan display: none jika ingin elemen benar-benar hilang dan elemen lain mengisi posisinya (dropdown, modal, tab, loading spinner).
- Gunakan visibility: hidden jika ingin elemen tidak terlihat tapi layout tetap sama (placeholder, spoiler yang masih menyisakan ruang).

3. Menampilkan Kembali Elemen dengan Nilai Display yang Tepat

Saat menampilkan kembali elemen yang disembunyikan dengan display: none, kita perlu mengatur ulang nilai display ke nilai defaultnya. Nilai default tergantung jenis elemen:

• <div>, <section>, <p> → default display: block
• <span>, <a>, <em> → default display: inline
• <button> → default display: inline-block
• <li> → default display: list-item

Cara yang lebih aman: gunakan class CSS untuk mengontrol tampilan/sembunyi.

Contoh dengan Class CSS (Paling Disarankan):

<style>
    .hidden {
        display: none;
    }
    .card {
        background: #f0f4f8;
        padding: 20px;
        border-radius: 10px;
        margin-bottom: 10px;
    }
</style>

<button id="toggleClassBtn">Toggle Card</button>
<div id="myCard" class="card">
    <h3>Judul Card</h3>
    <p>Ini adalah konten card yang bisa disembunyikan dengan class CSS.</p>
</div>

<script>
    const toggleBtn = document.getElementById("toggleClassBtn");
    const myCard = document.getElementById("myCard");
    
    toggleBtn.addEventListener("click", function() {
        myCard.classList.toggle("hidden");
        
        // Ubah teks tombol
        if (myCard.classList.contains("hidden")) {
            toggleBtn.textContent = "Tampilkan Card";
        } else {
            toggleBtn.textContent = "Sembunyikan Card";
        }
    });
</script>

Judul Card

Ini adalah konten card yang bisa disembunyikan dengan class CSS.

Kelebihan Menggunakan Class CSS:

• Tidak perlu mengingat nilai default display setiap elemen
• CSS lebih terpisah dari JavaScript (clean code)
• Bisa menambahkan efek transisi (fade, slide) dengan CSS transition
• Lebih mudah untuk mengelola banyak elemen sekaligus

Contoh Proyek: Accordion (Menu Lipat)

Accordion adalah komponen yang sangat umum di website: saat diklik, kontennya mengembang/terlipat.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Accordion - Menampilkan/Menyembunyikan Elemen</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            padding: 40px 20px;
        }
        .container {
            max-width: 600px;
            margin: 0 auto;
        }
        h1 {
            text-align: center;
            color: #1e293b;
            margin-bottom: 30px;
        }
        .accordion-item {
            background: white;
            border-radius: 12px;
            margin-bottom: 15px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0,0,0,0.05);
        }
        .accordion-header {
            background: #3b82f6;
            color: white;
            padding: 15px 20px;
            cursor: pointer;
            font-weight: bold;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .accordion-header:hover {
            background: #2563eb;
        }
        .accordion-header .icon {
            font-size: 18px;
            transition: transform 0.3s;
        }
        .accordion-content {
            padding: 0 20px;
            background: white;
            transition: all 0.3s;
        }
        .accordion-content p {
            padding: 20px 0;
            color: #334155;
            line-height: 1.6;
        }
        .hidden-content {
            display: none;
        }
        .info {
            background: #eef2ff;
            padding: 15px;
            border-radius: 10px;
            margin-top: 30px;
            font-size: 13px;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>FAQ - Pertanyaan Umum</h1>
        
        <div class="accordion-item">
            <div class="accordion-header">
                <span>Apa itu JavaScript?</span>
                <span class="icon">+</span>
            </div>
            <div class="accordion-content hidden-content">
                <p>JavaScript adalah bahasa pemrograman yang membuat website menjadi interaktif. Dengan JavaScript, kita bisa merespon klik pengguna, mengubah konten halaman, memvalidasi form, dan banyak lagi.</p>
            </div>
        </div>
        
        <div class="accordion-item">
            <div class="accordion-header">
                <span>Apa perbedaan let dan var?</span>
                <span class="icon">+</span>
            </div>
            <div class="accordion-content hidden-content">
                <p>let memiliki lingkup blok (block scope), sedangkan var memiliki lingkup fungsi (function scope). let lebih disarankan untuk penggunaan modern karena lebih aman dan tidak menyebabkan hoisting yang membingungkan.</p>
            </div>
        </div>
        
        <div class="accordion-item">
            <div class="accordion-header">
                <span>Bagaimana cara belajar JavaScript?</span>
                <span class="icon">+</span>
            </div>
            <div class="accordion-content hidden-content">
                <p>Mulailah dengan dasar-dasar: variabel, tipe data, fungsi, array, object. Kemudian praktik langsung dengan membuat proyek kecil seperti to-do list, kalkulator, atau game sederhana. Konsistensi adalah kunci!</p>
            </div>
        </div>
        
        <div class="info">
            Teknik yang Digunakan: Setiap accordion header memiliki event klik. Saat diklik, kita mengambil elemen konten di bawahnya dan men-toggle class hidden-content (yang mengatur display: none). Ikon juga berubah dari + menjadi - saat terbuka.
        </div>
    </div>

    <script>
        // Ambil semua header accordion
        const accordionHeaders = document.querySelectorAll(".accordion-header");
        
        accordionHeaders.forEach(header => {
            header.addEventListener("click", function() {
                // Ambil konten di bawah header ini
                const content = this.nextElementSibling;
                const icon = this.querySelector(".icon");
                
                // Toggle class hidden-content
                content.classList.toggle("hidden-content");
                
                // Ubah ikon
                if (content.classList.contains("hidden-content")) {
                    icon.textContent = "+";
                } else {
                    icon.textContent = "-";
                }
            });
        });
    </script>

</body>
</html>

Hasil visual accordion:

FAQ - Pertanyaan Umum

Apa itu JavaScript? +

Apa perbedaan let dan var? +

Bagaimana cara belajar JavaScript? +

Teknik yang Digunakan: Klik header untuk menampilkan/menyembunyikan konten di bawahnya.

Contoh Proyek: Modal Popup

Modal popup adalah jendela dialog yang muncul di atas halaman utama.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <title>Modal Popup - Menampilkan/Menyembunyikan Elemen</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: #f0f4f8;
            min-height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .open-btn {
            background: #3b82f6;
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 8px;
            font-size: 16px;
            cursor: pointer;
        }
        .open-btn:hover {
            background: #2563eb;
        }
        .modal-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.5);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 1000;
        }
        .modal-content {
            background: white;
            padding: 25px;
            border-radius: 16px;
            max-width: 400px;
            width: 90%;
            text-align: center;
        }
        .modal-content h2 {
            margin-bottom: 15px;
            color: #1e293b;
        }
        .modal-content p {
            margin-bottom: 20px;
            color: #64748b;
        }
        .close-btn {
            background: #ef4444;
            color: white;
            border: none;
            padding: 8px 20px;
            border-radius: 6px;
            cursor: pointer;
        }
        .hidden-modal {
            display: none;
        }
        .info {
            position: fixed;
            bottom: 20px;
            left: 20px;
            right: 20px;
            background: #eef2ff;
            padding: 12px;
            border-radius: 10px;
            font-size: 13px;
            text-align: center;
        }
    </style>
</head>
<body>

    <button id="openModalBtn" class="open-btn">Buka Modal</button>
    
    <div id="myModal" class="modal-overlay hidden-modal">
        <div class="modal-content">
            <h2>Selamat Datang!</h2>
            <p>Ini adalah contoh modal popup. Klik tombol di bawah untuk menutup.</p>
            <button id="closeModalBtn" class="close-btn">Tutup</button>
        </div>
    </div>
    
    <div class="info">
        Teknik Modal: Modal disembunyikan dengan class hidden-modal (display: none). Saat tombol "Buka Modal" diklik, class dihapus. Saat tombol "Tutup" diklik, class ditambahkan kembali.
    </div>

    <script>
        const openBtn = document.getElementById("openModalBtn");
        const closeBtn = document.getElementById("closeModalBtn");
        const modal = document.getElementById("myModal");
        
        openBtn.addEventListener("click", function() {
            modal.classList.remove("hidden-modal");
        });
        
        closeBtn.addEventListener("click", function() {
            modal.classList.add("hidden-modal");
        });
        
        // Klik di luar modal (overlay) juga bisa menutup
        modal.addEventListener("click", function(e) {
            if (e.target === modal) {
                modal.classList.add("hidden-modal");
            }
        });
    </script>

</body>
</html>

Hasil visual modal popup:

Klik tombol di atas untuk membuka modal popup.

Selamat Datang!

Ini adalah contoh modal popup. Klik tombol di bawah untuk menutup.

Contoh Proyek: Loading Spinner

Loading spinner digunakan untuk memberi tahu pengguna bahwa proses sedang berlangsung.

<style>
    .spinner {
        width: 40px;
        height: 40px;
        border: 4px solid #f3f4f6;
        border-top: 4px solid #3b82f6;
        border-radius: 50%;
        animation: spin 1s linear infinite;
        margin: 20px auto;
    }
    @keyframes spin {
        0% { transform: rotate(0deg); }
        100% { transform: rotate(360deg); }
    }
    .hidden {
        display: none;
    }
    button {
        background: #3b82f6;
        color: white;
        border: none;
        padding: 10px 20px;
        border-radius: 6px;
        cursor: pointer;
    }
</style>

<button id="simulasiBtn">Simulasi Proses</button>
<div id="loadingSpinner" class="spinner hidden"></div>
<p id="hasilProses"></p>

<script>
    const simulasiBtn = document.getElementById("simulasiBtn");
    const spinner = document.getElementById("loadingSpinner");
    const hasil = document.getElementById("hasilProses");
    
    simulasiBtn.addEventListener("click", function() {
        // Tampilkan spinner
        spinner.classList.remove("hidden");
        hasil.innerHTML = "Memproses...";
        simulasiBtn.disabled = true;
        
        // Simulasi proses yang memakan waktu (2 detik)
        setTimeout(function() {
            spinner.classList.add("hidden");
            hasil.innerHTML = "Proses selesai! Data berhasil dimuat.";
            simulasiBtn.disabled = false;
        }, 2000);
    });
</script>

Kesalahan Umum Pemula

• Menggunakan display: none lalu mengatur ulang dengan display yang salah → Elemen <div> butuh display: block, <span> butuh display: inline. Gunakan class CSS untuk menghindari masalah ini.
• Lupa bahwa visibility: hidden masih memakan tempat → Layout bisa terlihat aneh karena ada ruang kosong.
• Mencoba menyembunyikan elemen yang belum dimuat → Pastikan script dijalankan setelah elemen dimuat (letakkan di akhir body atau gunakan DOMContentLoaded).
• Menyembunyikan elemen dengan display: none tapi elemen tidak bisa ditemukan oleh JavaScript → Elemen tetap ada di DOM meskipun tidak terlihat.
• Lupa bahwa elemen yang disembunyikan dengan display: none tidak bisa diinteraksi → Tidak bisa diklik, di-hover, atau di-focus.

Debugging Tips:

• Gunakan Developer Tools (F12) → tab Elements → lihat apakah elemen memiliki class atau style yang menyembunyikannya
• Cek tab Styles untuk melihat apakah ada CSS yang menerapkan display: none atau visibility: hidden
• Gunakan console.log(element.style.display) untuk melihat nilai display saat ini

Latihan Singkat

1. Buat file HTML baru dengan judul "Latihan Tampil Sembunyi"
2. Buat sebuah paragraf dan dua tombol: "Sembunyikan" dan "Tampilkan"
3. Gunakan display: none untuk menyembunyikan dan menampilkan paragraf
4. Buat satu tombol toggle yang bisa menyembunyikan dan menampilkan sebuah gambar
5. Buat perbandingan kecil: dua kotak dengan tombol "Sembunyikan (display)" dan "Sembunyikan (visibility)" untuk melihat perbedaannya
6. Simpan dan buka di browser, coba semua tombol

Intisari Hari Ini

• display: none → elemen hilang sepenuhnya (tidak memakan tempat)
• visibility: hidden → elemen tidak terlihat tapi masih memakan tempat
• classList.toggle() → cara paling praktis untuk toggle tampil/sembunyi
• Gunakan class CSS untuk mengontrol tampil/sembunyi (lebih bersih dan aman)
• Aplikasi umum: accordion, modal popup, dropdown menu, loading spinner, tab panel, password toggle, dll.

Tantangan Akhir Pekan: Buat sebuah Tab Panel Component yang interaktif! Persyaratan:

• Buat 3 tombol tab: "Tab 1", "Tab 2", "Tab 3"
• Buat 3 konten yang berbeda untuk masing-masing tab
• Saat tombol tab diklik, konten tab yang sesuai ditampilkan, dan konten tab lainnya disembunyikan
• Tab yang aktif harus memiliki gaya berbeda (misal background biru, teks putih)
• Gunakan class CSS untuk menyembunyikan konten yang tidak aktif
• Gunakan event listener untuk merespon klik tab
• Buat efek transisi saat konten berganti (opsional, dengan CSS transition)
• Tambahkan kotak penjelasan yang menunjukkan properti mana yang digunakan untuk menyembunyikan elemen

Bonus: Buat tab panel yang bisa diakses dengan keyboard (tombol panah kiri/kanan).

Selamat mencoba!

---

Artikel Sebelumnya: HTML Dasar #29 - Menambahkan Event Klik (onclick) pada Tombol
Artikel Selanjutnya: HTML Dasar #31 - Membuat Counter Sederhana (Tombol + dan -)