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:

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 Cella → Testi 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à Pagina → Esperto → Prima 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>

20/11/2018 - codice aggiornato per la versione 17.0.4: LINK

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 Codice → Esperto → 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>

20/11/2018 - codice aggiornato per la versione 17.0.4: LINK

Tutte le altre indicazioni rimangono invariate.