Κουμπιά για απόκρυψη και εμφάνιση στοιχείου σε JavaScript

Σε αυτήν την ενότητα θα μάθουμε να αποκρύπτουμε και να εμφανίζουμε στοιχεία της σελίδας. Όπως συνήθως, θα ξεκινήσουμε με κάτι απλό και θα γινόμαστε σταδιακά πιο σύνθετοι.

Ας υποθέσουμε για ζέσταμα ότι έχουμε μια παράγραφο και δύο κουμπιά:

<p id="elem">κείμενο</p>
<input type="submit" id="show" value="εμφάνιση">
<input type="submit" id="hide" value="απόκρυψη">

Θα πάρουμε αναφορές στα στοιχεία μας σε μεταβλητές:

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

Ας κάνουμε τώρα έτσι ώστε με κλικ στο ένα κουμπί η παράγραφός μας να αποκρύπτεται, και στο άλλο - να εμφανίζεται. Για αυτό θα δίνουμε ή θα αφαιρούμε από το στοιχείο την αντίστοιχη CSS κλάση:

.hidden {
	display: none;
}

Ας λύσουμε το πρόβλημά μας:

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

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

Τροποποιήστε τον κώδικά μου έτσι ώστε να υπάρχει μόνο ένα κουμπί. Ας γίνει με το πρώτο κλικ σε αυτό το κουμπί το στοιχείο να εμφανίζεται, και με το δεύτερο - να αποκρύπτεται.