Cara Membuat Toggle Hide/Show dengan Javascript

Tidak akan pernah bisa melihat wajah sendiri dengan baik jika cerminnya kusam dan kotor. Pun sama, tidak akan pernah bisa melihat dengan baik seluruh kehidupan ini jika hati kita kusam dan kotor. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Toggle Hide/Show dengan Javascript.

Toggle Hide/Show adalah fungsi untuk membuat konten yang sudah kita atur untuk kita hide atau kita sembunyikan. Lalu dapat kita tampilkan lagi atau yang disebut dengan show hanya dengan memakai 1 tombol tersebut. Oke berikut Cara Membuat Toggle Hide/Show dengan Javascript.

Seperti biasa, terlebih dahulu siapkan file index.html nya.

Kemudian isi di bagian <body> tag-tag HTML berikut.

<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>

<button onclick="myFunction()">Try it</button>

<div id="myDIV">
This is my DIV element.
</div>

<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>

Setelah itu, isi untuk CSS nya.

#myDIV {
    width: 100%;
    padding: 50px 0;
    text-align: center;
    background-color: lightblue;
    margin-top:20px;
}

Dan yang terakhir, isi untuk bagian Javascript nya.

<script>
function myFunction() {
    var x = document.getElementById('myDIV');
    if (x.style.display === 'none') {
        x.style.display = 'block';
    } else {
        x.style.display = 'none';
    }
}
</script>

Bagaimana teman-teman? Cukup mudah bukan?

Sekian untuk tutorial kali ini tentang Cara Membuat Toggle Hide/Show dengan Javascript.

Semoga bermanfaat, terima kasih.