Front W - Pattern Library

Accordion 

<div data-controller="accordion" data-accordion-expand-label-value="Alle ausklappen" data-accordion-collapse-label-value="Alle einklappen">
    <div class="accordion__item">
        <h3 data-accordion-target="trigger">Item 1</h3>
        <div class="accordion__body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
        </div>
    </div>
    <div class="accordion__item">
        <h3 data-accordion-target="trigger">Item 1</h3>
        <div class="accordion__body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
        </div>
    </div>
    <div class="accordion__item">
        <h3 data-accordion-target="trigger">Item 1</h3>
        <div class="accordion__body">
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>
        </div>
    </div>
</div>
 
<div data-controller="accordion" data-accordion-expand-label-value="Alle ausklappen" data-accordion-collapse-label-value="Alle einklappen">
  {% for item in items %}
  <div class="accordion__item">
    <h3 data-accordion-target="trigger">{{ item.title }}</h3>
    <div class="accordion__body">
      {{ item.content|raw }}
    </div>
  </div>
  {% endfor %}
</div>
 
{
  "items": [
    {
      "title": "Item 1",
      "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>"
    },
    {
      "title": "Item 1",
      "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>"
    },
    {
      "title": "Item 1",
      "content": "<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p><p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur exercitationem aliquid voluptatem iste dolores quisquam incidunt accusantium, minus, omnis perspiciatis veniam laboriosam? Sed corrupti, repellat alias totam eum expedita quas!</p>"
    }
  ]
}