<div id="accordionSection" class=" grid gap-4">
<div class="grid gap-6 p-4 md:p-6 lg:p-8 n7-accordion--default rounded-2xl">
<h3 class="n7-accordion__title n7-content-01 font-medium text-lg lg:text-2xl flex ">
<button type="button" aria-expanded="false" class="n7-accordion__trigger group flex items-center text-left flex-1 transition-all" aria-controls="accordionSection-1" id="accordion1id">
<span class="n7-accordion__trigger-label">
Come funziona l’apparato visivo?
</span>
<span class="n7-accordion__icon flex p-2 ml-auto h-auto transition-all text-primary-600 rounded-full shadow-lg group-aria-expanded:bg-primary-600 group-aria-expanded:text-white ">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-8 md:h-8 lg:w-9 lg:h-9 is-show-more group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-8 md:h-8 lg:w-9 lg:h-9 is-show-less hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</span>
</button>
</h3>
<div id="accordionSection-1" role="region" aria-labelledby="accordion1id" class="n7-accordion__pane transition-all" hidden>
<div class="grid gap-6 sm:grid-cols-2">
<img src="../../images/apparato-visivo.jpeg" alt="" loading="lazy" class="image rounded-2xl" />
<p class="lg:text-lg">L’occhio o <strong>bulbo oculare</strong> è la parte esterna dell’organo della vista. Alloggiato nella cavità orbitaria, è protetto dal complesso degli annessi oculari (palpebre ma anche ciglia e lacrime). La funzione dell’occhio è concepita per far si che i raggi luminosi che penetrano al suo interno vadano a focalizzarsi sulla retina; a livello retinico gli stimoli luminosi vengono trasformati in impulsi nervosi e trasmessi attraverso il nervo ottico e le vie ottiche all’area visiva del cervello, il quale li interpreterà e consentirà la comprensione delle informazioni su immagini e colori, ricevute dall’occhio in modo da conseguire una percezione visiva del mondo esterno.</p>
</div>
</div>
</div>
<div class="grid gap-6 p-4 md:p-6 lg:p-8 n7-accordion--default rounded-2xl">
<h3 class="n7-accordion__title n7-content-01 font-medium text-lg lg:text-2xl flex ">
<button type="button" aria-expanded="false" class="n7-accordion__trigger group flex items-center text-left flex-1 transition-all" aria-controls="accordionSection-2" id="accordion1id">
<span class="n7-accordion__trigger-label">
Cos’è la retina?
</span>
<span class="n7-accordion__icon flex p-2 ml-auto h-auto transition-all text-primary-600 rounded-full shadow-lg group-aria-expanded:bg-primary-600 group-aria-expanded:text-white ">
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-8 md:h-8 lg:w-9 lg:h-9 is-show-more group-aria-expanded:hidden" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-right" />
</svg>
<svg class="inline-block align-middle fill-current w-4 h-4 md:w-8 md:h-8 lg:w-9 lg:h-9 is-show-less hidden group-aria-expanded:inline-block" aria-hidden="true" focusable="false" role="img">
<use xlink:href="../../icons.svg#mini--chevron-down" />
</svg>
</span>
</button>
</h3>
<div id="accordionSection-2" role="region" aria-labelledby="accordion1id" class="n7-accordion__pane transition-all" hidden>
<div class="grid gap-6 sm:grid-cols-2">
<img src="../../images/apparato-visivo.jpeg" alt="" loading="lazy" class="image rounded-2xl" />
<p class="lg:text-lg">L’occhio o <strong>bulbo oculare</strong> è la parte esterna dell’organo della vista. Alloggiato nella cavità orbitaria, è protetto dal complesso degli annessi oculari (palpebre ma anche ciglia e lacrime). La funzione dell’occhio è concepita per far si che i raggi luminosi che penetrano al suo interno vadano a focalizzarsi sulla retina; a livello retinico gli stimoli luminosi vengono trasformati in impulsi nervosi e trasmessi attraverso il nervo ottico e le vie ottiche all’area visiva del cervello, il quale li interpreterà e consentirà la comprensione delle informazioni su immagini e colori, ricevute dall’occhio in modo da conseguire una percezione visiva del mondo esterno.</p>
</div>
</div>
</div>
</div>
<div id="accordionSection" class="{%- block classes -%}
{%- if classes %} {{ classes }}{% endif -%}{%- endblock classes -%}">
{% for panel in panels %}
<div class="grid gap-6 p-4 md:p-6 lg:p-8 n7-accordion--default rounded-2xl">
<h3 class="n7-accordion__title n7-content-01 font-medium text-lg lg:text-2xl flex {% if panelTitleClasses %}{{ panelTitleClasses }}{% endif %}">
<button type="button" aria-expanded="{% if panel.isOpen %}true{% else %}false{% endif %}" class="n7-accordion__trigger group flex items-center text-left flex-1 transition-all{% if triggerClasses %} {{ triggerClasses }} {% endif %}" aria-controls="accordionSection-{{ loop.index }}" id="accordion1id">
<span class="n7-accordion__trigger-label">
{{ panel.label }}
</span>
{% block icon %}
<span class="n7-accordion__icon flex p-2 ml-auto h-auto transition-all{% if iconClasses %} {{ iconClasses }} {% endif %}">
{% render "@icon", {id: showMoreIcon, size: iconSize, classes: 'is-show-more group-aria-expanded:hidden'}, true %}
{% render "@icon", {id: showLessIcon, size: iconSize, classes: 'is-show-less hidden group-aria-expanded:inline-block'}, true %}
</span>
{% endblock icon %}
</button>
</h3>
<div id="accordionSection-{{ loop.index }}" role="region" aria-labelledby="accordion1id" class="n7-accordion__pane transition-all{% if panelContentClasses %} {{ panelContentClasses }}{% endif %}"{% if not panel.isOpen %} hidden{% endif %}>
{# {{ panel.text|safe }} #}
<div class="grid gap-6 sm:grid-cols-2">
{% render "@image", {src: '/images/apparato-visivo.jpeg', class: 'rounded-2xl'}, true %}
<p class="lg:text-lg">L’occhio o <strong>bulbo oculare</strong> è la parte esterna dell’organo della vista. Alloggiato nella cavità orbitaria, è protetto dal complesso degli annessi oculari (palpebre ma anche ciglia e lacrime). La funzione dell’occhio è concepita per far si che i raggi luminosi che penetrano al suo interno vadano a focalizzarsi sulla retina; a livello retinico gli stimoli luminosi vengono trasformati in impulsi nervosi e trasmessi attraverso il nervo ottico e le vie ottiche all’area visiva del cervello, il quale li interpreterà e consentirà la comprensione delle informazioni su immagini e colori, ricevute dall’occhio in modo da conseguire una percezione visiva del mondo esterno.</p>
</div>
</div>
</div>
{% endfor %}
</div>
{
"showMoreIcon": "mini--plus",
"showLessIcon": "mini--minus",
"iconSize": "w-4 h-4 md:w-8 md:h-8 lg:w-9 lg:h-9",
"panels": [
{
"label": "Nunc aliquam phasellus molestie blandit?",
"text": "Neque blandit pellentesque nunc sed amet. Nisl, semper sed aliquam amet proin purus augue et."
}
]
}
/**
* ACCORDION
*
*/
@layer components {
.n7-accordion {
@apply grid gap-6 p-4 md:p-6 lg:p-8;
}
.n7-accordion--default {
@apply bg-white rounded shadow-md;
}
.n7-accordion--minimal {
@apply border-b n7-border-gray-01;
}
}
/*
* This content is licensed according to the W3C Software License at
* https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
*
* Simple accordion pattern example
*/
'use strict';
class Accordion {
constructor(domNode) {
this.rootEl = domNode;
this.buttonEl = this.rootEl.querySelector('button[aria-expanded]');
const controlsId = this.buttonEl.getAttribute('aria-controls');
this.contentEl = document.getElementById(controlsId);
this.open = this.buttonEl.getAttribute('aria-expanded') === 'true';
// add event listeners
this.buttonEl.addEventListener('click', this.onButtonClick.bind(this));
}
onButtonClick() {
this.toggle(!this.open);
}
toggle(open) {
// don't do anything if the open state doesn't change
if (open === this.open) {
return;
}
// update the internal state
this.open = open;
// handle DOM updates
this.buttonEl.setAttribute('aria-expanded', `${open}`);
if (open) {
this.contentEl.removeAttribute('hidden');
} else {
this.contentEl.setAttribute('hidden', '');
}
}
// Add public open and close methods for convenience
open() {
this.toggle(true);
}
close() {
this.toggle(false);
}
}
// init accordions
const accordions = document.querySelectorAll('.n7-accordion__title');
accordions.forEach((accordionEl) => {
new Accordion(accordionEl);
});
Accordion component configuration.
Blocks: