Manipolare il DOM: creare dropdown e modal in Javascript

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");
});