Nút để ẩn và hiển thị phần tử bằng JavaScript

Trong phần này, chúng ta sẽ học cách ẩn và hiển thị các phần tử trên trang. Như thường lệ, hãy bắt đầu với thứ gì đó đơn giản, và dần dần phức tạp hơn.

Giả sử để khởi động, chúng ta có một đoạn văn và hai nút:

<p id="elem">text</p>
<input type="submit" id="show" value="show">
<input type="submit" id="hide" value="hide">

Lấy các tham chiếu đến phần tử của chúng ta vào các biến:

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

Bây giờ hãy làm sao để khi nhấp chuột vào một nút thì đoạn văn của chúng ta ẩn đi, còn khi nhấp vào nút kia - thì hiển thị lên. Để làm điều này, chúng ta sẽ thêm hoặc xóa lớp CSS tương ứng cho phần tử:

.hidden {
	display: none;
}

Giải quyết nhiệm vụ của chúng ta:

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

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

Hãy sửa đổi code của tôi sao cho chỉ có một nút duy nhất. Giả sử khi nhấp chuột lần đầu vào nút này phần tử được hiển thị, còn khi nhấp lần thứ hai - thì bị ẩn đi.