OffHealth component library

Accordion component: Content Index 

<div id="accordionSection" class="n7-accordion n7-accordion--minimal">

    <div class="n7-accordion__title flex ">
        <button type="button" aria-expanded="false" class="n7-accordion__trigger lg:cursor-default lg:pointer-events-none group flex items-center flex-1 transition-all" aria-controls="accordionSection-1" id="accordion1id">
            <span class="n7-accordion__trigger-label">
                <span class="n7-category n7-category--lg">

                    <svg class="inline-block align-middle fill-current w-2 h-2 mr-2 transition-all duration-200 ease-out transform group-hover:-translate-x-1 text-primary-400" aria-hidden="true" focusable="false" role="img">
                        <use xlink:href="../../icons.svg#solid--circle" />
                    </svg>

                    INDICE CONTENUTO
                </span>
            </span>

            <span class="n7-accordion__icon lg:hidden flex p-2 ml-auto h-auto transition-all">
                <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-down" />
                </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-up" />
                </svg>

            </span>

        </button>
    </div>
    <div id="accordionSection-1" role="region" aria-labelledby="accordion1id" class="n7-accordion__pane transition-all lg:!block" hidden>
        <nav id="contentIndex">
            <ol style="counter-reset: li" class="grid gap-y-2 sm:gap-y-3 gap-x-6 sm:grid-cols-3 lg:grid-cols-4 border-t n7-border-gray-01 pt-4">
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#congiuntiva">Congiuntiva</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#corpo-ciliare">Corpo ciliare</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#iride">Iride</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#camera-anteriore">Camera anteriore</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#cornea">Cornea</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#pupilla">Pupilla</a>
                </li>
            </ol>
        </nav>
    </div>

</div>
 
<div id="accordionSection" class="n7-accordion{%- block classes -%}
    {%- if classes %} {{ classes }}{% endif -%}{%- endblock classes -%}">
    {% for panel in panels %}
    <div class="n7-accordion__title flex {% if panelTitleClasses %}{{ panelTitleClasses }}{% endif %}">
        <button type="button" aria-expanded="{% if panel.isOpen %}true{% else %}false{% endif %}" class="n7-accordion__trigger lg:cursor-default lg:pointer-events-none group flex items-center flex-1 transition-all{% if triggerClasses %} {{ triggerClasses }} {% endif %}" aria-controls="accordionSection-{{ loop.index }}" id="accordion1id">
            <span class="n7-accordion__trigger-label">
                {% render '@category--overline', {text: 'INDICE CONTENUTO', classes: 'n7-category--lg'}, true %}
            </span>
            {% block icon %}
                <span class="n7-accordion__icon lg:hidden flex p-2 ml-auto h-auto transition-all{% if iconClasses %} {{ iconClasses }} {% endif %}">
                    {% render "@icon", {id: 'mini--chevron-down', size: iconSize, classes: 'is-show-more group-aria-expanded:hidden'}, true %}
                    {% render "@icon", {id: 'mini--chevron-up', size: iconSize, classes: 'is-show-less hidden group-aria-expanded:inline-block'}, true %}
                </span>
            {% endblock icon %}
        </button>
    </div>
    <div id="accordionSection-{{ loop.index }}" role="region" aria-labelledby="accordion1id" class="n7-accordion__pane transition-all lg:!block{% if panelContentClasses %} {{ panelContentClasses }}{% endif %}"{% if not panel.isOpen %} hidden{% endif %}>
        <nav id="contentIndex">
            <ol style="counter-reset: li" class="grid gap-y-2 sm:gap-y-3 gap-x-6 sm:grid-cols-3 lg:grid-cols-4 border-t n7-border-gray-01 pt-4">
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#congiuntiva">Congiuntiva</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#corpo-ciliare">Corpo ciliare</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#iride">Iride</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#camera-anteriore">Camera anteriore</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#cornea">Cornea</a>
                </li>
                <li style="counter-increment: li" class="grow before:content-[counter(li)] before:text-black before:inline-flex before:justify-center before:items-center before:w-6 before:h-6 before:text-white before:n7-body-xs before:bg-primary-900 before:rounded-full">
                    <a class="ml-2" href="#pupilla">Pupilla</a>
                </li>
            </ol>
        </nav>
    </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."
    }
  ],
  "minisiteHidden": true,
  "classes": "n7-accordion--minimal"
}
  • Content: 
    /**
 * 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;
    }
}
  • URL: /components/raw/accordion/accordion.css
  • Filesystem Path: components/03-molecules/accordion/accordion.css
  • Size: 273 Bytes
  • Content: 
    /*
 *   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);
});
  • URL: /components/raw/accordion/accordion.js
  • Filesystem Path: components/03-molecules/accordion/accordion.js
  • Size: 1.4 KB

Accordion component configuration.

  • classes: value - class overrides
  • panelTitleClasses: classes for panel title
  • triggerClasses: classes for panel trigger
  • iconClasses: classes for accordion icon
  • panelContentClasses: classes for panel content
  • showMoreIcon: icon id for show more
  • showLessIcon: icon id for show less
  • panels: accordion panels
    • isOpen: true - set which panel should be open on first loading
    • label: value - panel text label
    • text: value - panel text content

Blocks:

  • classes: for class overridings in variant templates, if needed
  • icon: for accordion icon overriding