Visualizzazione dei risultati da 1 a 4 su 4
  1. #1
    Utente di HTML.it
    Registrato dal
    Nov 2018
    Messaggi
    2

    Accordion - Nascondere automaticamente tab non selezionate

    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

  2. #2
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,435
    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:
    codice:
    <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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

  3. #3
    Utente di HTML.it
    Registrato dal
    Nov 2018
    Messaggi
    2
    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?

  4. #4
    Moderatore di CSS L'avatar di KillerWorm
    Registrato dal
    Apr 2004
    Messaggi
    4,435
    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:
    codice:
    <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
    Prima di postare considera che tra i link utili puoi trovare il 75% delle risposte alle tue domande; il 15% tra i post del forum; il 9% sul web.
    Ti resta l’1% ... usalo bene!

    Le cattive domande sono quelle che non meritano risposta, le buone domande sono quelle che non hanno risposta
    L'Itailano non e nu'opnioine. E' improntate uslaro correattemtne sul froum. Garize!

Tag per questa discussione

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.