Manipolare il DOM: creare dropdown e modal in Javascript
Troverai nel progetto
Che cosa realizzeremo in questo progetto ?
In questo progetto andremo a simulare la sezione di FAQ di un sito qualsiasi. Andremo a creare due dropdown ed un modale. Perciò andremo a realizzare degli elementi che presentano al loro interno solo una domanda, e premendoci sopra andremo a mostrare anche la risposta. Nel caso dei dropdown, quest'ultima viene mostrata come se uscisse da sotto la domanda, nel caso del modale, invece, verrà mostrata tramite appunto un modale.
Come aprire un dropdown
Per la realizzazione dei dropdown andremo ad utilizzare un medoto che abbiamo già trattato: toggle().
Per prima cosa andimao a selezionare tutti i nodi dei pulsanti che ci serviranno ad aprire i dropdown, andando ad utilizzare il metodo querySelectorAll, che ci restituisce una NodeList contenente tutti i nodi selezionati tramite il selettore passato come parametro.
const buttons = document.querySelectorAll(".question-btn");
A questo punto andiamo ad utilizzare un forEach sulla NodeList, e per ogni bottone selezionato andremo a scrivere un addEventListener. In questo modo dovremo far si che al click sul pulsante, il target si sposti sul contenitore di tutto l'elemento, in modo da poter utilizzare toggle() sull'elemento corretto. Per far ciò utilizzeremo l' event object, accedendo alla proprietà parentElement.
In questo modo:
buttons.forEach((button) => { button.addEventListener("click", (e) => { const question = e.currentTarget.parentElement.parentElement; question.classList.toggle("show-text"); }); });
Nodi da selezionare per aprire un modale
Per il funzionamento del modale, i nodi che andremo a selezionare sono:
- il pulsante per l'apertura
- il pulsante per la chiusura
- il modale di per se (compreso di overlay)
Cosi:
const modalBtn = document.querySelector(".open-modal-btn"); const modal = document.querySelector(".modal-overlay"); const closeBtn = document.querySelector(".close-btn");
Come aprire e chiudere un modale
Quello che andremo a fare a questo punto è fare in modo che premendo su modalBtn, il modale venga aperto, e che premendo invece su closeBtn, il modale venga chiuso.
Per farlo andremo ad utilizzare degli addEventListener sui pulsanti, ed al click andremo ad aggiungere e rimuovere la classe che ci permetterà di visualizzare il modale.
modalBtn.addEventListener("click", function () { modal.classList.add("show-modal"); });
closeBtn.addEventListener("click", function () { modal.classList.remove("show-modal"); });