accordion

Accordion

This accordion component works without JavaScript by using multiple detail and summary elements. It therefore does not behave like a normal accordion, but instead multiple entries could be open at the same time. If JavaScript is enabled, the behavior will be enhanced and the component behaves like a normal accordion.

An accordion item can be pre-opened by adding its ID as the URL hash.

Information

Folder
src/components/elements/accordion

Files

Schema 
// src/components/elements/accordion/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/accordion
additionalProperties: false
type: object
required:
  - items
properties:
  items:
    type: array
    items:
      type: string
      format: html
      description: elements/accordion/accordion-item
  classes:
    type: array
    items:
      type: string
  border_color:
    type: string
    enum:
      - '--color-border-primary'
      - '--color-border-tertiary'
Mocks 
// src/components/elements/accordion/mocks.yaml

items:
  - $ref: elements/accordion/accordion-item
    $tpl: elements/accordion/accordion-item
  - $ref: elements/accordion/accordion-item#long-title
    $tpl: elements/accordion/accordion-item
border_color: '--color-border-primary'
$variants:
  - $name: Open
    $opts:
      items: combine
    items:
      - open: true
Template 
// src/components/elements/accordion/accordion.twig

<div
	class="Accordion js-Accordion {{ classes|join(" ") }}"
	style="--Accordion-item-border-color: var({{ border_color }});"
>
	{% for item in items %}
		<div class="Accordion-item">{{ item }}</div>
	{% endfor %}
</div>

Variants

default
Open
Question

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a very long title of an accordion item that will propbably wrap into a new line or maybe also not it depends

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

Open
Open
Question

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

This is a very long title of an accordion item that will propbably wrap into a new line or maybe also not it depends

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.