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.

Information

Folder
src/components/patterns/accordion

Files

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

$schema: http://json-schema.org/draft-07/schema
$id: /patterns/accordion
additionalProperties: false
type: object
required:
  - items
properties:
  heading:
    type: string
    format: html
    description: patterns/heading
  items:
    type: array
    items:
      $ref: /patterns/accordion/accordion-item
Mocks 
// src/components/patterns/accordion/mocks.yaml

items:
  - $ref: patterns/accordion/accordion-item
  - $ref: patterns/accordion/accordion-item#long-title
$variants:
  - $name: With heading
    heading:
      $tpl: patterns/heading
      $ref: patterns/heading#h2
      heading: Accordion
  - $name: Open
    $opts:
      items: combine
    items:
      - open: true
Template 
// src/components/patterns/accordion/accordion.twig

<div class="Accordion js-Accordion">
	{% if heading %}
		<div class="Accordion-heading">
			{{ heading }}
		</div>
	{% endif %}
	{% for item in items %}
		<div class="Accordion-item">
			{% include "@patterns/accordion/accordion-item/accordion-item.twig" with item only %}
		</div>
	{% endfor %}
</div>

Variants

default
Open
This is the title of an accordion item

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

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

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

With heading
Open

Accordion

This is the title of an accordion item

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

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

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

Open
Open
This is the title of an accordion item

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.

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

Aliquip quis culpa consequat officia officia esse eu veniam minim deserunt sunt Lorem labore. Sunt incididunt veniam aliquip exercitation cupidatat eu anim. Sit tempor ex nulla consequat anim veniam qui aliquip nostrud. Est anim ex elit est culpa ut consequat. Nisi minim anim id cupidatat nisi veniam do irure consectetur irure et.

Eu reprehenderit ad aliqua do aliqua dolore amet sunt excepteur ut ut deserunt aliquip consequat. Velit minim do officia proident eiusmod aliquip id ut mollit. Ut amet labore nulla enim culpa esse nisi consequat incididunt. Tempor consectetur dolore reprehenderit eiusmod minim sint proident. Veniam laboris et nisi proident occaecat ipsum.