Tombol untuk Menyembunyikan dan Menampilkan Elemen dengan JavaScript

Dalam bagian ini, kita akan belajar menyembunyikan dan menampilkan elemen halaman. Seperti biasa, mari mulai dengan sesuatu yang sederhana, dan secara bertahap menambah kompleksitas.

Misalkan untuk pemanasan, kita memiliki sebuah paragraf dan dua tombol:

<p id="elem">teks</p>
<input type="submit" id="show" value="tampilkan">
<input type="submit" id="hide" value="sembunyikan">

Dapatkan referensi ke elemen kita ke dalam variabel:

let elem = document.querySelector('#elem');
let show = document.querySelector('#show');
let hide = document.querySelector('#hide');

Sekarang mari kita buat agar saat diklik pada satu tombol, paragraf kita disembunyikan, dan saat diklik pada tombol lainnya - ditampilkan. Untuk melakukannya, kita akan memberikan atau menghapus kelas CSS yang sesuai pada elemen:

.hidden {
	display: none;
}

Mari selesaikan tugas kita:

hide.addEventListener('click', function() {
	elem.classList.add('hidden');
});

show.addEventListener('click', function() {
	elem.classList.remove('hidden');
});

Modifikasi kode saya sehingga hanya ada satu tombol. Misalkan saat klik pertama pada tombol ini elemen ditampilkan, dan saat klik kedua - disembunyikan.