Blocco Details singolo

In questa pagina esamineremo il funzionamento del blocco details come singolo blocco; anche quando sono presenti insieme più blocchi ognuno apre e chiude il suo contenuto senza interferire con gli altri.

L’elemento  <details> crea un widget di divulgazione in cui le informazioni sono visibili solo quando il widget viene attivato in uno stato aperto. Si compone di freccia triangolare, di un sommario o un’etichetta (che può essere qualsiasi contenuto di intestazione, testo normale o HTML che può essere utilizzato all’interno di un paragrafo) utilizzando l’elemento <summary> e di un contenuto che può essere un semplice paragrafo o elementi complessi strutturati con Gutenberg. In altre parole si compone di un elemento padre e di un elemento figlio. Per impostazione predefinita si presenta come un piccolo triangolo che ruota (in basso o a destra) per indicare lo stato aperto/chiuso, con un’etichetta accanto al triangolo (elemento summary). Come grafica predefinita usa css list-style-type: disclosure-open; list-style-type: disclosure-close;. Cliccando su di esso si apre l’elemento figlio, cliccando ancora si torna alla situazione di partenza.

E’ anche possibile presentare il blocco al contrario: aperto in origine e chiuso al click, basta mettere la spunta sul menu Gutenberg di destra, come nell’immagine.

Si tratta di un modo nativo dell’HTML per mostrare e nascondere i contenuti, inserito da WordPress 6.3. È ottimo per frammenti di codice comprimibili, note, avvisi e molto altro. Fa parte del ricco set di strumenti di WordPress per la creazione e la modifica dei contenuti con l’editor a blocchi. Il blocco Dettagli è particolarmente utile per creare sezioni di informazioni aggiuntive o qualsiasi altro contenuto che si desidera mantenere compatto finché un lettore non sceglie di visualizzarlo.

Cliccando sul blocco “details” è possibile inserire un testo o domanda e nel rigo successivo inserire la risposta. Il blocco nasconde o mostra il contenuto aggiuntivo.

Nella sezione impostazioni è possibile stabilire se la risposta è subito visibile e si può nascondere o se è nascosta e si può vedere cliccando sulla domanda o andando sopra la domanda con il cursore e premendo la barra spaziatrice.

I codici seguenti indicano l’HTML semplice delle schede e l’HTML generato da WordPress, con l’aggiunta delle classi proprie del sistema WordPress, abbastanza comprensibili

    <div class="tabs2">
<h2>Tabs apri</h2>
    <details>
        <summary>Lorem ipsum dolor?</summary>
        <p class="risposta">Lorem ipsum dolor sit amet. Si vis pacem para bellum et cetera.</p>
        </details>
         
        <details>
        <summary>Lorem ipsum dolor?</summary>
        <p class="risposta" style="text-align: justify;padding:10px 20px;">Lorem ipsum dolor sit amet. Timeo danaos et dona ferentes.</p>
        </details>
         
        <details>
        <summary>Lorem ipsum dolor?</summary>
        <p class="risposta" style="text-align: justify;padding:10px 20px;">Lorem ipsum dolor sit amet. Par in parem non habet imperium.</p>
        </details>
    </div>

<style>
.tabs2  summary{
	cursor: pointer;
	border-top: 1px solid;
	padding: 10px;
	margin: 0;font-style: italic;
}
.tabs2 summary {  
  margin-left:0px;
  transition: all 0.7s ease-in-out;
}
.tabs2 summary:hover {  
    margin-left:5px;
    transition: all 0.7s ease-in-out;
}
.tabs2 .risposta{
  text-align: justify;padding:10px 20px;
}



.tabs2 details[open] .risposta {
  animation: sweep 0.5s ease-in-out;
}
@keyframes sweep {
  0% {opacity: 0; transform: translateX(-10px)}
  100% {opacity: 1; transform: translateX(0)}
}
.tabs2 summary:before {
    border-radius: 5px;
    content: "+";
    display: flex;
    float:right;
    font-size: 1.4em;
    margin: 0px;       
} 
.tabs2 details[open] summary:before, .tabs4 details[open] summary:before {content: "-"; }


</style>

Attraverso il menu style è possibile definire l’aspetto grafico direttamente; oppure si può usare uno style incorporato o un foglio di style esterno, con tutte le variabili che si trovano nel terzo link.

Esempi di utilizzo di Details

Il blocco è utile non solo per la divulgazione di informazioni, ma anche per la creazione di FAQ e, con qualche personalizzazione, di glossario.

Ecco alcuni esempi di FAQ realizzati direttamente con Gutenberg, rispettivamente a una colonna, a due colonne allineate verticalmente e a due colonne allineate orizzontalmente.

Domande frequenti

Lorem ipsum dolor sit amet, consectetur adipiscing elit

Esempio di FAQ realizzata con Gutenberg e js

[ Questo è il codice html finale elaborato da Gutenberg ]

<div class="wp-block-group scheda1 is-layout-constrained wp-block-group-is-layout-constrained">
<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow" open><summary>titolo</summary>
<p class="sch1-content">aaaLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</details>

<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>titolo</summary>
<p class="sch1-content">bbbLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</details>

<details class="wp-block-details is-layout-flow wp-block-details-is-layout-flow"><summary>titolo</summary>
<p class="sch1-content">cccLorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</details>
</div>

<style>
.scheda1 .wp-block-details	{margin-block-start: 4px;}
.scheda1 .wp-block-details[open] p{ padding: 10px;font-size: 14px;
    background: #fafafa;border: 1px solid #f0f0f0;animation: sweep 0.5s ease-in-out;}
	  

@keyframes sweep {
  0% {opacity: 0; }
  100% {opacity: 1; }
}
.scheda1 .wp-block-details:hover, .scheda1 .wp-block-details[open]{opacity:.8}
.scheda1 .wp-block-details[open] summary::after {content: " -"}
.scheda1 .wp-block-details summary::after {content: " +";float: right;text-align: right;}
.scheda1 .wp-block-details summary{background: #999;font-size: 18px;color: #fff;
    padding: 5px 10px;margin-bottom: 0px;cursor: pointer;}
</style>

  <script> 
  $(function () {
    function closeAll(openDetails) {
        var details = document.getElementsByTagName("details");
        var len = details.length;
        for (var i = 0; i < len; i++) {
            if (details[i] != openDetails) {
                details[i].removeAttribute("open");
            }
        }
    }
    $('details').on('click', '> summary:first-child', function () {
        closeAll(this.parentNode);
    });
});
	   </script>

Aggiunta di un marcatore personalizzato

L’elemento Details può essere personalizzato attraverso CSS. L’elemento summary supporta il 
::marker CSS, quindi tutte le proprietà dei caratteri, la proprietà white-space, color, tutte le proprietà di animazione e transizione.

In alternativa, è possibile scegliere come target l’opzione pseudo-elemento CSS ::before o 
::after . In questo modo il marcatore può essere inserito prima e/o dopo il summary.

Inoltre è possibile eliminare del tutto il marcatore se si inserisce il summary all’interno di un pulsante. Per rimuovere il triangolo di apertura, utilizzare
summary::marker {display:none;content: "";}

Per modificare il marker ci sono utili indicazioni qui e qui.