Accordion Menu

In questa lezione realizzeremo un Accordion Menu in JavaScript. Un Accordion Menu è un componente interattivo che consente di organizzare e presentare informazioni in modo chiaro e ordinato, con la possibilità di espandere o contrarre sezioni specifiche.

Durante questa lezione, esploreremo passo dopo passo come strutturare il nostro menu nell’HTML, applicare stili accattivanti con il CSS e implementare la logica interattiva con il JavaScript. Impareremo come gestire gli eventi di clic, aprire e chiudere sezioni in modo dinamico e migliorare l’esperienza utente con transizioni fluide e icone dinamiche.

Se siete pronti a scoprire il mondo degli Accordion Menu e ad arricchire le vostre competenze di sviluppo web, iniziamo questa emozionante avventura insieme!

Innanzitutto ecco il risultato di ciò che vogliamo ottenere. Cliccate dunque sulle varie sezioni per vedere aprire e chiudere i relativi menù:

Codice HTML per l’Accordion Menu

Dapprima sviluppiamo la struttura HTML necessaria per il nostro menù. Ci sarà un container principale dove tutti gli elementi del menu saranno inclusi all’interno di questo div. Ogni div con la classe accordion-item rappresenta una sezione dell’Accordion Menu. Ogni sezione è composta da un’intestazione (header) e un contenuto. L’intestazione della sezione contiene il titolo della categoria (ad esempio, “HTML” o “CSS”) e un’icona di freccia (la classe .arrow), che ruoterà quando la sezione è aperta. Il contenuto della sezione contiene informazioni dettagliate sulla categoria specifica (ad esempio, una descrizione di HTML, CSS o JavaScript).

In questo modo abbiamo progettato un menù per espandersi e contrarsi quando si clicca sull’intestazione di ciascuna sezione, mostrando o nascondendo il contenuto corrispondente.

Ecco di seguito il codice HTML:

<div class="accordion">
    <div class="accordion-item">
      <div class="accordion-item-header">
        HTML
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>HTML, acronimo di "HyperText Markup Language" (Linguaggio di Marcatura per l'IperTesto), è il linguaggio di markup standard utilizzato per la creazione e la strutturazione delle pagine web. Creato da Tim Berners-Lee, HTML fornisce un insieme di regole che definiscono la struttura logica di una pagina web, identificando e delimitando i vari elementi che la compongono.</p>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        CSS
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>CSS, acronimo di "Cascading Style Sheets" (Fogli di Stile in Cascata), è un linguaggio di stile utilizzato per definire l'aspetto e la formattazione di documenti HTML. La sua principale funzione è separare la struttura di una pagina web dal suo design, consentendo agli sviluppatori di applicare stili coerenti e personalizzati.</p>
      </div>
    </div>
    <div class="accordion-item">
      <div class="accordion-item-header">
        JavaScript
        <div class="arrow"></div>
      </div>
      <div class="accordion-item-content">
        <p>JavaScript è un linguaggio di programmazione ad alto livello, interpretato e orientato agli oggetti. Originariamente sviluppato per aggiungere interattività alle pagine web, JavaScript è ora utilizzato in una vasta gamma di contesti, inclusi sviluppo web, sviluppo di app lato client, server-side e persino per lo sviluppo di app mobili.</p>
      </div>
    </div>
    <!-- Aggiungi altre sezioni se necessario -->
  </div>

Codice CSS per l’Accordion Menu

Impostiamo del codice CSS a piacere per la realizzazione dell’accordion menù.

.accordion {
    display: flex;
    flex-direction: column;
    width: 600px;
    margin: 20px auto;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    overflow: hidden;
}

/* Stile per ogni elemento del menu */
.accordion-item {
   border-bottom: 1px solid #ddd;
   overflow: hidden;
   transition: background-color 0.3s;
}

 /* Stile per l'intestazione del menu (il titolo cliccabile) */
.accordion-item-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 15px;
   cursor: pointer;
   background-color: #3498db;
   color: #fff;
   font-weight: bold;
}

/* Stile per il contenuto del menu (il testo nascosto) */
.accordion-item-content {
   background-color: white;
   display: none;
   padding: 15px;
}

/* Stile per la freccia */
.arrow {
   width: 0;
   height: 0;
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #fff;
   transition: transform 0.3s;
 }

/* Stile per la freccia quando la sezione è aperta */
.active .arrow {
   transform: rotate(180deg);
}

/* Hover effect */
.accordion-item:hover {
  background-color: #2980b9;
}

.accordion-item:hover .accordion-item-header {
  background-color: #2980b9;
}

.accordion-item:hover .arrow {
   border-top-color: #3498db;
}

Codice JavaScript

Crea il blocco di codice JavaScript che è responsabile della gestione interattiva del tuo Accordion Menu. Selezioniamo tutti gli accordion-item utilizzando il metodo querySelectorAll con la classe .accordion-item. Creiamo dunque una NodeList di elementi che rappresentano le sezioni dell’Accordion Menu. Iteriamo su ciascun elemento del menu e aggiungiamo un event listener per il clic.

Per ogni elemento del menu diverso da quello cliccato (item) e che ha la classe ‘active’:

• Rimuove la classe ‘active’ per nascondere visivamente la sezione.
• Nasconde il contenuto della sezione impostando display: 'none'.
• Toglie o aggiunge la classe ‘active’ all’elemento del menu cliccato, cambiando il suo aspetto visivo.
• Toglie o mostra il contenuto della sezione in base al suo stato corrente (display).

Ecco dunque il codice JavaScript necessario per realizzare il nostor Accordion Menu:

const accordionItems = document.querySelectorAll('.accordion-item');

accordionItems.forEach(function (item) {
    item.addEventListener('click', function () {
      // Chiudi tutti gli altri elementi del menu
      accordionItems.forEach(function (accordionItem) {
        if (accordionItem !== item && accordionItem.classList.contains('active')) {
          accordionItem.classList.remove('active');
          const content = accordionItem.querySelector('.accordion-item-content');
          content.style.display = 'none';
        }
      });

      // Toggle della classe "active" sull'elemento .accordion-item
      item.classList.toggle('active');

      // Toggle della visualizzazione del contenuto
      const content = item.querySelector('.accordion-item-content');
      content.style.display = (content.style.display === 'block') ? 'none' : 'block';
    });
  });

Conclusione

In questa lezione abbiamo sviluppato una semplice Accordion Menu in JavaScript, provate anche voi a svilupparne uno e scrivete nei commenti sotto. Nelle prossime lezioni svilupperemo ancora tanti altri progetti creativi.

Alcuni link utili

Corso linguaggio JavaScript

Libro JavaScript

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Semplice quiz utilizzando gli array

Come realizzare il gioco dei dadi online