18 aprile 2016

Effetto accordion con gli oggetti di WebSite X5 12

Esistono diversi codici in rete, realizzati con jQuery o con i CSS3, per creare un accordion, cioè quell'effetto che, al click su un elemento della pagina, porta alla visualizzazione, appunto con effetto fisarmonica, di un elemento nascosto.  Oggi vedremo come creare questo effetto utilizzando gli oggetti di WebSite X5 12, senza dover scrivere troppo codice: useremo il titolo della cella dell'oggetto come elemento sempre visibile e il resto dell'oggetto si visualizzerà solo cliccando sul titolo.

Un esempio potrebbe essere la creazione di una pagina FAQ in cui, al click sulla singola domanda (titolo della cella) viene visualizzata la risposta (contenuto ed eventuale descrizione della cella).

Qui la nostra demo:

effetto accordion oggetti website x5
DEMO

Questi i passi per riprodurre la nostra demo:

1. In Creazione della Pagina inseriamo un Oggetto Testo in modo che occupi l'intera riga.

2. Assegnamo un'ancora all'oggetto appena creato; il nome dell'ancora deve iniziare con msacc (esempio msacc01 ).

3. In Stile della CellaTesti scriviamo la nostra domanda come contenuto del Titolo e impostiamo un colore di sfondo e gli altri stili grafici.

4. All'interno dell'oggetto scriviamo la risposta, definendo tutte le opzioni grafiche che preferiamo.

5. Ripetiamo la procedura fin qui descritta tante volte quante sono le domande/risposte che dobbiamo inserire.

6. In Proprietà PaginaEspertoPrima della chiusura del tag HEAD incolliamo questo codice CSS:
<style>
.msaccordion div[id^='imCellStyleTitle_']{
cursor:pointer;
}
span.symFaq {
 font-family:"Courier New", Courier, monospace;
 font-weight:bold;
}
</style>
La prima regola di stile assegna la forma pointer al cursore in modo che il titolo/domanda venga facilmente identificato come elemento cliccabile. La seconda regola di stile è riferita al simbolo (+/-) che viene visualizzato a fianco della domanda: noi abbiamo scelto il carattere Courier New per mantenere costante lo spazio occupato dal simbolo.

Sempre nella stessa sezione, dopo il CSS precedente, incolliamo il seguente codice:
<script src="js/jquery-ui-effect.min.js"></script>
<script> 
/* ============================================================== 
Accordion Object: versione base
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit 
============================================================== */
$(document).ready(function() {
  $("div[id^='msacc']").parent().addClass("msaccordion");
  $(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
  $(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
    $(this).prepend("<span class='symFaq'>+ </span>"); //simbolo grafico pannello chiuso
    $(this).parent().css("min-height", $(this).outerHeight(true));
  });
  $(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
    var $this = $(this);
    if ($this.next().is(":visible")) {
      setTimeout(function() {
        $this.find("span").html("+ "); //simbolo grafico pannello chiuso
        $this.css("background-color", "#404040") //colore background pannello chiuso
      }, 500);
    } else {
      $this.find("span").html("&#8211; ");  //simbolo grafico pannello aperto
      $this.css("background-color", "#ff7700"); //colore background pannello aperto
    }
    $this.nextAll().toggle("blind", 500);  //effetti UI consigliati: blind, drop, fade, slide
  });
});
</script>
Sono personalizzabili i colori di background della domanda nei due stati pannello chiuso / pannello aperto, il tempo di durata dell'animazione (nel nostro caso 500 millisecondi) e il tipo di effetto ottenuto grazie alle funzioni della libreria jQuery UI; potete consultare l'elenco completo degli effetti QUI.

7. Come ultima cosa scarichiamo ed alleghiamo al progetto il file jquery-ui-effect.min.js: in Impostazioni Avanzate →  Statistiche, SEO e CodiceEsperto File allegati al codice impostando js come Percorso relativo sul Server.

Nella nostra demo abbiamo utilizzato degli oggetti testo, ma nulla vieta di utilizzare lo script con altri oggetti (immagine, slideshow, video...).

Per rimanere in tema di effetto accordion, vi segnaliamo anche questa alternativa, ottenuta utilizzando l'Oggetto Catalogo Prodotti:
Visualizzare i prodotti con effetto accordion - Forum Unofficial WSX5




Aggiornamento del 01/05/2016
Abbiamo scritto un codice alternativo per fare in modo che all'apertura di un pannello si chiuda quello già aperto.

QUI la demo.

Questo il codice jQuery, da sostituire a quello indicato nel punto 6:

<script src="js/jquery-ui-effect.min.js"></script>
<script> 
/* ============================================================== 
Accordion Object: versione collapse all
Author's custom code: http://quellidelcucuzzolo.blogspot.it
Please do not remove credit 
============================================================== */
$(document).ready(function() {
  $("div[id^='msacc']").parent().addClass("msaccordion");
  $(".msaccordion div[id^='imCellStyle_'], .msaccordion div[id^='imCellStyleDescription']").css("display", "none");
  $(".msaccordion div[id^='imCellStyleTitle_']").each(function() {
    $(this).prepend("<span class='symFaq'>+ </span>"); //simbolo grafico pannello chiuso
    $(this).parent().css("min-height", $(this).outerHeight(true));
  });
  $(".msaccordion div[id^='imCellStyleTitle_']").click(function() {
    var $this = $(this);
    var $opentab = $(".msaccordion div[id^='imCellStyle_']:visible");
    $opentab.prev().nextAll().hide("blind", 500, function() { //effetti UI consigliati: blind, drop, fade, slide
      $opentab.prev().css("background-color", "#404040").find("span").html("+ ") //colore background e simbolo grafico pannello chiuso
    });
    if ($this.next().is(":hidden")) {
      $this.nextAll().show("blind", 500); //effetti UI consigliati: blind, drop, fade, slide
      $this.css("background-color", "#ff7700").find("span").html("&#8211; "); //colore background e simbolo grafico pannello aperto
    }
  });
});
</script>

Tutte le altre indicazioni rimangono invariate.


21 commenti:

  1. Per prima cosa, vorrei ringraziare tutti voi per tuto qello che fate per noi utenti.

    Voelvo chiedere gentilmente, dopo aver seguito tutta la descrizione dell'articolo, mi succede che lo script va bene in apertura, ma non si richiude.
    Mi spiego meglio "credo" cliccando sul + si apre la descrizione da me inserita, poi cliccando sul meno cambia solo colore la barra ma resta la ancora la descrizione e non scompare, come se non ci fosse animazione.
    Ringgrazio per l'aiuto

    RispondiElimina
    Risposte
    1. Ciao Anna Luisa,
      grazie a te per il commento.

      Probabilmente non hai allegato correttamente il file jquery-ui-effect.min.js come descritto nel punto 7.

      Verifica che il suddetto file sia presente nella cartella js

      Elimina
    2. Scusami, mi sono accorta che togliendo un altro codice css e scripti di WOWSlider, funziona tutto, ma poi non mi funziona lo slider d wowslider, forse andranno in contrasto? come potrei rosolvere. Grazie

      Elimina
    3. Un possibile conflitto potrebbe essere causato da un doppio inserimento della libreria jQuery, ma senza vedere nulla possiamo dirti poco. Se vuoi, puoi scrivere qui o inviarci via mail il link alla tua prova/sito online.

      Elimina
    4. Ti ringrazio ecco il link http://www.systemtecno.it/prova/teleassistenza.html

      Elimina
    5. Come già anticipato devi rimuovere la doppia libreria jQuery che hai inserito con WOWSlider, WebSite X5 ne carica già una.

      Hai anche un paio di tag </script> orfani, rimuovili.

      Elimina
  2. Ti ringrazzio per la tua disponibilita'.
    il file e nella cartella js, unico mio dubbio e che abbia scaricato il file giusto, cioe' cliccando sul link da voi postato e salvato col tasto dx.

    RispondiElimina
  3. Ciao cari, non ho ancora provato ma mi chiedevo come fare per far chiudere un pannello quando si apre l'altro. Nella demo restano tutti aperti.
    Grazie
    Sandro

    RispondiElimina
    Risposte
    1. Ciao Sandro,
      sì, l'effetto è voluto.
      Se vuoi che all'apertura di un pannello si chiuda quello aperto devi modificare lo script.
      Prova a vedere come abbiamo fatto per questo sito oppure prova ad adattare uno fra i tanti codici che trovi in rete.
      Magari, in futuro, faremo anche questa variante.

      Elimina
    2. Ciao Sandro,

      abbiamo aggiornato l'articolo con la nuova variante.

      Elimina
  4. Scusatemi se do ancora fastidio, mi succede che tra una domanda e l'altra resta parecchio spazio, anche gestendo i margini delle celle non si aggiusta nulla.
    Grazie

    RispondiElimina
    Risposte
    1. Ciao Anna Luisa,

      probabilmente questo accade perché non hai espanso l'oggetto in modo che occupi la riga intera, come abbiamo scritto al punto 1 dell'articolo.

      Elimina
  5. Salve, ho utilizzato questo vostro effetto per una sezione notizie che avevo creato con la versione 13 di website x5 e funzionava benissimo.
    Ora che ho provato con la versione 14 i pannelli non si chiudono più.
    Mi potreste aiutare a risolvere il problema?
    Se può essere utile vi lascio il link della pagina dove sto facendo delle prove https://www.arcierisagittario.it/news-.html
    Grazie.

    RispondiElimina
    Risposte
    1. Ciao Andrea,
      ti sei dimenticato di allegare il file jquery-ui-effect.min.js

      Elimina
  6. Ciao scusate avevo allegato il file come file invece di js.
    Grazie ancora

    RispondiElimina
  7. Ciao, intanto grazie per il tutorial, funziona tutto benissimo.

    Domanda; io avrei bisogno di creare più sottosezioni, cioè più accordion che si aprono l'uno dentro l'altro. Con questo metodo non saprei come fare visto che andiamo ad interagire con un unico modulo.

    Esiste un modo per farlo o c'è proprio un limite fisico alla cosa?

    RispondiElimina
    Risposte
    1. Ciao Selina,
      ci dispiace ma in questo periodo non abbiamo tempo per rivedere lo script ed adattarlo alle tue esigenze.
      In Rete ci sono molti esempi di accordion, sicuramente puoi trovare quello più adatto anche se non usa gli oggetti di WebSite X5.

      Se in futuro avremo più tempo magari proveremo a scrivere qualcosa.

      Elimina
  8. Buongiorno a tutti!
    Vi ringrazio per il codice, mi è tornato molto utile.
    Avrei solo una domanda da farvi...

    Se io volessi inserire un link che rimanda a un oggetto ancorato (msacc01, per esempio) all'interno della pagina in cui ho inserito l'accordion, c'è modo di far si che venga visualizzato l'oggetto già "aperto"?

    Inoltre, che stringa di codice bisognerebbe aggiungere per far si che venga sottolineato il testo al passaggio del mouse, così da rendere più intuitivo il fatto che bisognerebbe cliccare per aprire la scheda?

    Link esempio: http://www.criptoinvestire.com/guida-ledger-nano-s.html

    Grazie a tutti in anticipo.
    Enzo

    RispondiElimina
    Risposte
    1. Ciao Vincenzo,
      secondo noi quello che vuoi fare potrebbe risultare confusionario.

      In questo periodo non abbiamo tempo per scrivere qualcosa ma possiamo darti delle indicazioni di massima su un modo per farlo.
      Potresti aggiungere uno script utilizzando il metodo .trigger() insieme all'evento click per simulare appunto l'apertura dell'oggetto con accordion quando si clicca sul relativo link.

      Per quanto riguarda la sottolineatura del testo al passaggio del mouse, puoi semplicemente sostituire la prima regola CSS con questa:

      .msaccordion div[id^='imCellStyleTitle_']:hover {
      cursor: pointer;
      text-decoration: underline;
      }


      Secondo noi sarebbe più intuitivo scrivere due righe di testo, ormai la navigazione con i dispositivi mobili è diventata numericamente importante e ci saranno sempre meno mouse nelle mani dei navigatori :)

      Elimina
    2. Ciao e grazie per la risposta!

      Purtroppo non sono un esperto di codice (per questo utilizzo dei CMS per creare siti web). A questo punto credo che farò a meno dell'apertura automatica dell'accordion, anche se sarebbe davvero utile per il mio sito.

      Per quanto riguarda la sottolineatura invece, io non voglio sostituirla ad altro, vorrei semplicemente aggiungere la sottolineatura agli effetti già presenti. Devo comunque sostituire la prima regola?

      Grazie :)
      Enzo

      Elimina
    3. Basta provare, non succede niente di grave :)
      Se non è quello che vuoi, rimetti la regola precedente.

      Elimina