accordion-item

// src/components/elements/accordion/accordion-item/schema.yaml

$schema: http://json-schema.org/draft-07/schema
$id: /elements/accordion/accordion-item
additionalProperties: false
type: object
required:
  - title
  - id
  - content
properties:
  title:
    type: string
  id:
    type: string
  content:
    type: string
    format: html
    description: elements/*
  open:
    type: boolean

// src/components/elements/accordion/accordion-item/mocks.yaml

title: Question
id: question
content:
  $tpl: elements/rich-text
  content: >-
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
    eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
    voluptua.</p>
$variants:
  - $name: Long title
    title: >-
      This is a very long title of an accordion item that will propbably wrap
      into a new line or maybe also not it depends
    id: long-title
  - $name: Open
    open: true
    id: open

// src/components/elements/accordion/accordion-item/accordion-item.twig

<details
	class="AccordionItem"
	id="{{ id }}"
	{% if open %} open{% endif %}
>
	<summary class="AccordionItem-title u-outline">
		{{ title }}
		{% include "@elements/icon/icon.twig" with {
			classes: ["AccordionItem-titleIcon"],
			name: "chevron_down",
		} only %}
	</summary>
	<div class="AccordionItem-content">
		{{ content }}
	</div>
</details>