In questa pagina esamineremo il funzionamento dei blocchi details come blocchi collegati ed interdipendenti: quando sono presenti più blocchi con lo stesso attributo name, se si apre un contenuto, automaticamente collassano tutti gli altri. In pratica, ogni volta che apri un dettaglio, gli altri si chiudono. Questo permette di evitare che troppi blocchi Dettagli aperti vadano ad occupare uno spazio eccessivo e a creare confusione nell’orientamento dell’utente.
Facendo seguito all’articolo Blocco Details singolo in cui si introduce il funzionamento del blocco Details, ecco descritto in sintesi il funzionamento dei blocchi integrati.
Apertura di un elemento e contestuale chiusura di altri collegati
La possibilità di chiudere un elemento e contemporaneamente chiudere l’elemento aperto necessità dell’attributo “name“. Benché sia supportato da tutti i browser, solo da poco tempo è possibile utilizzarla in WordPress, dopo che oltre all’attributo “class” è stato aggiunto il “name attribute“, come nell’immagine.
Prima era necessario creare un blocco html personalizzato, come il seguente.
Graduation Requirements
Requires 40 credits, including a passing grade in health, geography, history, economics, and wood shop.
System Requirements
Requires a computer running an operating system. The computer must have some memory and ideally some kind of long-term storage. An input device as well as some form of output device is recommended.
Job Requirements
Requires knowledge of HTML, CSS, JavaScript, accessibility, web performance, privacy, security, and internationalization, as well as a dislike of broccoli.
Ora si può fare tutto direttamente con Gutenberg. Ecco la versione grezza, cioè senza CSS.
argomento1
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
Ecco la versione con CSS.
argomento1
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
html
css
<style>
.tabs2 > details{margin-block-start: 0px!important;}
.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 .p{
text-align: justify;/*padding:10px 20px;*/
}
.tabs2 details[open] p {
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 {content: "-"; }
</style>JS
Altra versione CSS. Se a uno dei Details si dà l’apertura predefinita si realizza un accordion.
Accordion
argomento1
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento2
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
argomento3
Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.
html
css
<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>JS