<!-- Accordion -->
<section class="accordion" id="accordion_1" data-js-accordion aria-labelledby="accordion_1_title" aria-describedby="accordion_1_description">
<div class="fs-row">
<div class="fs-cell">
<div class="accordion_inner">
<div class="accordion_header">
<h2 class="accordion_title" id="accordion_1_title">
Accordion
</h2>
<div class="accordion_description" id="accordion_1_description">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. Donec ullamcorper nulla non metus auct.</p>
</div>
</div>
<div class="accordion_items">
<div class="accordion_item" id="accordion_1_item_1" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_1_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_1" aria-controls="accordion_1_item_1_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Lorem ipsum
</span>
<span class="accordion_item_button_subtitle">
Quam Bibendum Pellentesque Tellus
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_1_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_1_button">
Lorem <strong>ipsum dolor</strong> sit amet, consectetuer adipiscing elit. <a href="#">Aenean commodo</a> ligula eget dolor. Aenean massa. Cum <em>sociis natoque penatibus</em> et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_2" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_2_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_2" aria-controls="accordion_1_item_2_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Aenean massa
</span>
<span class="accordion_item_button_subtitle">
Donec pede justo, fringilla vel, aliquet nec, vulputate ege
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_2_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_2_button">
Donec pede justo, <em>fringilla vel, aliquet</em> nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_3" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_3_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_3" aria-controls="accordion_1_item_3_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Vulputate Porta Egestas Magna Dolor
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_3_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_3_button">
Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt.<br><br>
Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_4" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_4_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_4" aria-controls="accordion_1_item_4_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Sed consequat - Fusce vulputate
</span>
<span class="accordion_item_button_subtitle">
Etiam Ultricies Nisi Vel Augue
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_4_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_4_button">
Nam eget dui. Etiam rhoncus. Maecenas tempus, tellus eget condimentum rhoncus, sem quam semper libero, sit amet adipiscing sem neque sed ipsum. Nam quam nunc, blandit vel, luctus pulvinar, hendrerit id, lorem. Maecenas nec odio et ante tincidunt tempus. Donec vitae sapien ut libero venenatis faucibus. Nullam quis ante. Etiam sit amet orci eget eros faucibus tincidunt. Duis leo. Sed fringilla mauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_5" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_5_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_5" aria-controls="accordion_1_item_5_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Aliquam Lorem Ante Dapibus In Viverra Quis
</span>
<span class="accordion_item_button_subtitle">
Sed Consequat Leo Eget Bibendum Sodales Augue Velit
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_5_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_5_button">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet. Etiam ultricies nisi vel augue. Curabitur ullamcorper ultricies nisi. Nam eget dui.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_6" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_6_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_6" aria-controls="accordion_1_item_6_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Vulputate Porta Egestas Magna Dolor
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_6_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_6_button">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.
</div>
</div>
<div class="accordion_item" id="accordion_1_item_7" data-js-accordion-item>
<h3 class="accordion_item_heading">
<button class="accordion_item_button" id="accordion_1_item_7_button" data-js-swap data-js-accordion-swap data-swap-target="#accordion_1_item_7" aria-controls="accordion_1_item_7_content" aria-expanded="false">
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
Vestibulum Ante Ipsum Primis in Faucibus Orci Luctus et Ultrices
</span>
<span class="accordion_item_button_subtitle">
Quam Bibendum Pellentesque Tellus
</span>
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</h3>
<div class="accordion_item_content typography" id="accordion_1_item_7_content" data-js-accordion-content role="region" aria-labelledby="accordion_1_item_7_button">
Phasellus leo dolor, tempus non, auctor et, hendrerit quis, nisi. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Maecenas malesuada. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc, quis gravida magna mi a libero. Fusce vulputate eleifend sapien. Vestibulum purus quam, scelerisque ut, mollis sed, nonummy id, metus. Nullam accumsan lorem in dui. Cras ultricies mi eu turpis hendrerit fringilla. Ut varius tincidunt libero. Phasellus dolor. Maecenas vestibulum mollis diam. Pellentesque ut neque. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. In ac felis quis tortor malesuada pretium. Pellentesque auctor neque nec urna. Proin sapien ipsum, porta a, auctor quis, euismod ut, mi.
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- END: Accordion -->
{#
{% include '@component-accordion' with {
title: 'Title',
description: 'Description',
grouped: false,
items: [
{
title: 'Item Title',
subtitle: 'Item Subtitle',
description: '<p>Item Description</p>'
}
]
} %}
#}
{% set id = uniqid('accordion') %}
{% set item_heading_level = title ? 'h3' : 'h2' %}
<!-- Accordion -->
<{{ title ? 'section' : 'div' }}
class="accordion"
id="{{ id }}"
data-js-accordion
{% if title %}aria-labelledby="{{ id }}_title"{% endif %}
{% if description %}aria-describedby="{{ id }}_description"{% endif %}
>
<div class="fs-row">
<div class="fs-cell">
<div class="accordion_inner">
{% if title or description %}
<div class="accordion_header">
{% if title %}
<h2 class="accordion_title" id="{{ id }}_title">
{{ title }}
</h2>
{% endif %}
{% if description %}
<div class="accordion_description" id="{{ id }}_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
{% endif %}
<div class="accordion_items">
{% for item in items %}
{% set item_id = id ~ '_item_' ~ loop.index %}
<div
class="accordion_item"
id="{{ item_id }}"
data-js-accordion-item
>
<{{ item_heading_level }} class="accordion_item_heading">
<button
class="accordion_item_button"
id="{{ item_id }}_button"
data-js-swap
data-js-accordion-swap
data-swap-target="#{{ item_id }}"
{% if grouped %}data-swap-group="{{ id }}"{% endif %}
aria-controls="{{ item_id }}_content"
aria-expanded="false"
>
<span class="accordion_item_button_inner">
<span class="accordion_item_button_label">
<span class="accordion_item_button_title">
{{ item.title }}
</span>
{% if item.subtitle %}
<span class="accordion_item_button_subtitle">
{{ item.subtitle }}
</span>
{% endif %}
</span>
<span class="accordion_item_button_icon"></span>
</span>
</button>
</{{ item_heading_level }}>
<div
class="accordion_item_content typography"
id="{{ item_id }}_content"
data-js-accordion-content
role="region"
aria-labelledby="{{ item_id }}_button"
>
{{ item.description }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</{{ title ? 'section' : 'div' }}>
<!-- END: Accordion -->
No notes defined.