Accordion - Nascondere automaticamente tab non selezionate

[kiltro]

Buongiorno a tutti,


come posso modificare il codice nel link sotto per fare in modo che aprendo una Section le eventuali altre aperte si chiudano automaticamente?
https://www.w3schools.com/howto/tryi...cordion_symbol


Grazie

[KillerWorm]

Ciao e benvenuto, chiaramente puoi fare in millemila modi; in teoria all'interno del gestore click dovresti "ri-ciclare" tutti gli elementi accordion quindi rimuovere o applicare opportunamente la classe "active" (che è quella usata semplicemente per mostrare il segno "+" o "-") e reimpostare il valore di maxHeight per i relativi panel in base a ciò che è aperto o chiuso ... per me è più facile farlo che spiegarlo

Prova in questo modo, sostituisci l'intero script con questo:

<script>
  (function(){
    var acc = document.getElementsByClassName("accordion");
    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        for (var i = 0; i < acc.length; i++) {
          var that = acc[i];
          var panel = that.nextElementSibling;
          that.classList[this === that ? 'toggle' : 'remove']("active");
          panel.style.maxHeight = that.classList.contains("active") ? panel.scrollHeight + "px" : null;
        }
      });
    }
  })();
</script>

poi se hai bisogno di delucidazioni, chiedi pure

[kiltro]

Wow grazie, funziona!

Ti chiedo un'altra cosa, se ho aperto una voce dell'accordion e poi ne apro una seconda la prima si chiude proprio come volevo, però la pagina rimane all'altezza di prima.

Mi spiego meglio:
Se ad esempio ho aperto "Section 1" ed il suo contenuto è abbastanza lungo devo scorrere in basso nella pagina per andare a cliccare e aprire la "Section 2".
Una volta fatto questo però "Section 2" non è visibile nella pagina, dovrò scorrere per ritornare in alto nella pagina.
Non so se mi sono spiegato

C'è una soluzione a questo?

[KillerWorm]

C'è una soluzione a questo?

Potresti far scorrere la pagina in modo che si porti all'inizio della sezione appena aperta. Purtroppo non è una cosa così scontata e non c'è un unico metodo per farlo o una soluzione "convenzionale", ma puoi realizzarlo in vari modi a seconda di ciò che ti serve esattamente e delle tecnologie che puoi avere a disposizione; ad esempio, l'uso di jQuery potrebbe semplificare le cose se ti serve ottenere una soluzione più o meno cross-browser e magari una transizione "morbida" per lo scorrimento della pagina. In tal caso puoi cercare nel web qualcosa tipo: "jquery smooth scroll to element on page"

Qui invece una soluzione in puro JavaScript dove ho usato il metodo scrollIntoView() e qualche altro pezzo di codice per far scorrere la pagina in modo che sia reso visibile l'elemento una volta aperto:

<script>
  (function(){
    var acc = document.getElementsByClassName('accordion');
    for (var i = 0; i < acc.length; i++) {
      acc[i].addEventListener('click', function() {
        var me = this;
        for (var i = 0; i < acc.length; i++) {
          let that = acc[i];
          let panel = that.nextElementSibling;
          that.classList[me === that ? 'toggle' : 'remove']('active');
          panel.style.maxHeight = that.classList.contains('active') ? panel.scrollHeight + 'px' : null;
        }
        if (me.classList.contains('active')) {
          let panel = me.nextElementSibling;
          let scorri = function(){ me.scrollIntoView(true); };
          let h;
          let interval = setInterval(scorri,20);
          scorri();
          setTimeout(function(){clearInterval(interval);},500);
        }
      });
    }
  })();
</script>

Buon proseguimento