Πολλά στοιχεία με κουμπιά εμφάνισης σε JavaScript

Ας υποθέσουμε τώρα ότι έχουμε πολλές παραγράφους και κάθε μία έχει το δικό της κουμπί για απόκρυψη:

<p>1</p><button>toggle</button>
<p>2</p><button>toggle</button>
<p>3</p><button>toggle</button>

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

Για αυτό, με κάποιο τρόπο πρέπει να συνδέσουμε τα κουμπιά με τις παραγράφους μας. Για αυτό υπάρχουν αρκετοί τρόποι.

Πρώτος τρόπος

Ας συνδέσουμε τα κουμπιά και τις παραγράφους ως εξής:

<p id="elem1">1</p><button data-elem="elem1">toggle</button>
<p id="elem2">2</p><button data-elem="elem2">toggle</button>
<p id="elem3">3</p><button data-elem="elem3">toggle</button>

Τώρα με το κλικ σε οποιοδήποτε κουμπί θα διαβάζουμε το περιεχόμενο του χαρακτηριστικού data-elem και θα ψάχνουμε για παράγραφο με αυτό το id. Αυτή και θα την εναλλάσσουμε. Ας υλοποιήσουμε όσα περιγράφηκαν:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		let elem = document.querySelector('#' + this.dataset.elem);
		elem.classList.toggle('hidden');
	});
}

Μελετήστε τη λύση μου και στη συνέχεια αυτόνομα, χωρίς να κοιτάτε τον κώδικά μου, λύστε αυτό το πρόβλημα.

Δεύτερος τρόπος

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

Ας υλοποιήσουμε όσα περιγράφηκαν:

let buttons = document.querySelectorAll('button');
let elems   = document.querySelectorAll('p');

for (let i = 0; i < buttons.length; i++) {
	buttons[i].addEventListener('click', function() {
		elems[i].classList.toggle('hidden');
	});
}

Μελετήστε τη λύση μου και στη συνέχεια αυτόνομα, χωρίς να κοιτάτε τον κώδικά μου, λύστε αυτό το πρόβλημα.

Τρίτος τρόπος

Όπως μπορούμε να δούμε, η παράγραφος, που συνδέεται με το κουμπί, είναι ο αριστερός του γείτονας. Μπορούμε να το χρησιμοποιήσουμε ως σύνδεση:

let buttons = document.querySelectorAll('button');

for (let button of buttons) {
	button.addEventListener('click', function() {
		this.previousElementSibling.classList.toggle('hidden');
	});
}

Μελετήστε τη λύση μου και στη συνέχεια αυτόνομα, χωρίς να κοιτάτε τον κώδικά μου, λύστε αυτό το πρόβλημα.