<!-- Accordion -->
<div class="js-observable js-accordion accordion theme_dark">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="accordion_inner">
<div class="accordion_header">
<h2 class="accordion_title">
<span class="accordion_title_label">Admissions Deadlines</span>
</h2>
<div class="accordion_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="js-accordion-item js-accordion-item-3-1 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-1">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Mar 15</span>
<span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="Mar 15 Quam Bibendum Pellentesque Tellus">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-2 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-2">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">June 16</span>
<span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="June 16 Quam Bibendum Pellentesque Tellus">
<figure class="block_center"><img src="http://farm4.staticflickr.com/3379/3568245660_cf5ea9904a_z.jpg" alt="">
<figcaption>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Nulla vitae elit libero, a pharetra augue.</figcaption>
</figure>
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-3 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-3">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Vulputate Porta Egestas Magna Dolor</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="Vulputate Porta Egestas Magna Dolor">
<table>
<thead>
<tr>
<th>Colors</th>
<th>Shapes</th>
<th>Numbers</th>
<th>Percentages</th>
</tr>
</thead>
<tbody>
<tr>
<td>Black</td>
<td>Circle</td>
<td>One</td>
<td>10% of Lorem ipsum dolor sit amet, consectetur.</td>
</tr>
<tr>
<td>Blue</td>
<td>Square</td>
<td>Two</td>
<td>33% of Donec ullamcorper nulla non metus auctor.</td>
</tr>
</tbody>
</table>
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-4 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-4">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">August 12 - August 17</span>
<span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="August 12 - August 17 Quam Bibendum Pellentesque Tellus">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-5 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-5">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Lorem Tellus Sollicitudin Mollis</span>
<span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="Lorem Tellus Sollicitudin Mollis Quam Bibendum Pellentesque Tellus">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-6 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-6">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Vulputate Porta Egestas Magna Dolor</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="Vulputate Porta Egestas Magna Dolor">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
<div class="js-accordion-item js-accordion-item-3-7 accordion_item">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".js-accordion-item-3-7">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Lorem Tellus Sollicitudin Mollis</span>
<span class="accordion_item_heading_subtitle">Quam Bibendum Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content typography" aria-labelled="Lorem Tellus Sollicitudin Mollis Quam Bibendum Pellentesque Tellus">
Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Curabitur blandit tempus porttitor. Etiam porta sem malesuada magna mollis euismod. <a href="#">Donec ullamcorper nulla</a> non metus auctor fringilla.
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 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('js-accordion-item') %}
{% set group_id = uniqid('accordion-group') %}
<!-- Accordion -->
<div class="js-observable js-accordion accordion{% if theme %} theme_{{ theme }}{% endif %}">
<div class="fs-row">
<div class="fs-cell">
<div class="fs-mini">
<div class="accordion_inner">
{% if title or description %}
<div class="accordion_header">
{% if title %}
<h2 class="accordion_title">
<span class="accordion_title_label">{{ title }}</span>
</h2>
{% endif %}
{% if description %}
<div class="accordion_description">
<p>{{ description }}</p>
</div>
{% endif %}
</div>
{% endif %}
<div class="accordion_items">
{% for item in items %}
<div class="js-accordion-item {{ id }}-{{ loop.index }} accordion_item">
{% if item.title %}
<h3 class="accordion_item_heading">
{% else %}
<h2 class="accordion_item_heading">
{% endif %}
<button class="js-accordion-swap js-swap accordion_item_button" data-swap-target=".{{ id }}-{{ loop.index }}" {% if grouped %} data-swap-group="{{ group_id }}"{% endif %}>
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">{{ item.title }}</span>
{% if item.subtitle %}
<span class="accordion_item_heading_subtitle">{{ item.subtitle }}</span>
{% endif %}
</span>
<span class="accordion_item_heading_icon">
<span class="accordion_item_heading_icon_inner">
<i class="fa-regular fa-chevron-down"></i>
</span>
</span>
</span>
</button>
{% if item.title %}
</h3>
{% else %}
</h2>
{% endif %}
<div class="js-accordion-content accordion_item_content typography" aria-labelled="{{ item.title }}{% if item.subtitle %} {{ item.subtitle }}{% endif %}">
{{ item.description }}
{% if loop.first %}
<h4>Heading 4</h4>
<h5>Heading 5</h5>
<h6>Heading 6</h6>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<table>
<thead>
<tr>
<th>Heading</th>
<th>Heading</th>
<th>Heading</th>
</tr>
</thead>
<tbody>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
<tr>
<td>Cell Content</td>
<td>Cell Content</td>
<td>Cell Content</td>
</tr>
</tbody>
</table>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Accordion -->
No notes defined.