<!-- Accordion -->
<div class="js-accordion accordion component_theme_blue_navy" id="accordion_1" aria-labelledby="accordion_1_title">
<div class="fs-row">
<div class="fs-cell">
<div class="accordion_inner">
<div class="accordion_header">
<h2 class="accordion_title" id="accordion_1_title">
<span class="accordion_title_label">Explore Programs</span>
</h2>
</div>
<div class="accordion_items">
<div class="js-accordion-item accordion_item" id="accordion_1_item_1">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_1">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Quam Bibendum</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="accordion_item_content_media">
<figure class="accordion_item_content_figure">
<img class="accordion_item_content_image" srcset="https://images.fastspot.com/jhusoe/980x552/2 980w, https://images.fastspot.com/jhusoe/740x416/2 740w, https://images.fastspot.com/jhusoe/500x282/2 500w, https://images.fastspot.com/jhusoe/300x169/2 300w" sizes="(min-width: 1394px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x169/2" alt="" loading="lazy" width="300" height="169">
</figure>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_2">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_2">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Pellentesque Tellus</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
<p>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</p>
<p>Etiam porta sem malesuada magna mollis euismod.</p>
<p>Donec ullamcorper nulla non metus auctor fringilla.</p>
</div>
<div class="accordion_item_content_media">
<figure class="accordion_item_content_figure">
<img class="accordion_item_content_image" srcset="https://images.fastspot.com/jhusoe/980x552/3 980w, https://images.fastspot.com/jhusoe/740x416/3 740w, https://images.fastspot.com/jhusoe/500x282/3 500w, https://images.fastspot.com/jhusoe/300x169/3 300w" sizes="(min-width: 1394px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x169/3" alt="" loading="lazy" width="300" height="169">
</figure>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_3">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_3">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Vulputate Porta</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
</ul>
</div>
<div class="accordion_item_content_media">
<figure class="accordion_item_content_figure">
<img class="accordion_item_content_image" srcset="https://images.fastspot.com/jhusoe/980x552/4 980w, https://images.fastspot.com/jhusoe/740x416/4 740w, https://images.fastspot.com/jhusoe/500x282/4 500w, https://images.fastspot.com/jhusoe/300x169/4 300w" sizes="(min-width: 1394px) 632px, (min-width: 1220px) 552px, (min-width: 980px) 442px, (min-width: 740px) 332px, 90vw" src="https://images.fastspot.com/jhusoe/300x169/4" alt="" loading="lazy" width="300" height="169">
</figure>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_4">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_4">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Egestas Magna Dolor</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
</ul>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_5">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_5">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Lorem Tellus</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<p>Lorem ipsum dolor sit amet consectetur. Tortor id fringilla egestas in a rhoncus. Nec sed rhoncus placerat enim interdum viverra luctus. Vitae id lectus id pellentesque ultrices. Egestas tortor arcu vitae egestas elementum et sed tincidunt. Nulla elementum diam sed vitae. Mauris sed a mauris ac neque nibh. Tempor interdum integer turpis tincidunt etiam at vitae et pretium. In bibendum adipiscing amet nulla leo neque in. Auctor felis tristique parturient odio neque varius tellus.</p>
<p>Lorem ipsum dolor sit amet consectetur. Tortor id fringilla egestas in a rhoncus. Nec sed rhoncus placerat enim interdum viverra luctus. Vitae id lectus id pellentesque ultrices. Egestas tortor arcu vitae egestas elementum et sed tincidunt. Nulla elementum diam sed vitae. Mauris sed a mauris ac neque nibh. Tempor interdum integer turpis tincidunt etiam at vitae et pretium. </p>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_6">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_6">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Sollicitudin Mollis</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
</ul>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_7">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_7">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Tellus Sollicitus</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
</ul>
</div>
</div>
</div>
<div class="js-accordion-item accordion_item" id="accordion_1_item_8">
<h3 class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#accordion_1_item_8">
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">Lorem Mollis</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</h3>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
<ul>
<li>Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</li>
<li>Curabitur blandit tempus porttitor egestas tortor arcu vitae egestas elementum et sed tincidunt.</li>
<li>Etiam porta sem malesuada magna mollis euismod.</li>
<li>Donec ullamcorper nulla non metus auctor fringilla.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- END: Accordion -->
{#
{% include '@component-accordion' with {
title: 'Title',
description: 'Description',
grouped: false,
items: [
{
title: 'Item Title',
image: '',
description: '<p>Item Description</p>'
}
]
} %}
#}
{% set id = uniqid('accordion') %}
<!-- Accordion -->
<div class="js-accordion accordion component_theme_{{ theme ?: 'blue_navy' }}" id="{{ id }}" {% 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">
<span class="accordion_title_label">{{ title }}</span>
</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 %}
<div class="js-accordion-item accordion_item" id="{{ id }}_item_{{ loop.index }}">
<{{title?'h3':'h2'}} class="accordion_item_heading">
<button class="js-accordion-swap js-swap accordion_item_heading_button" data-swap-target="#{{ id }}_item_{{ loop.index }}" {% if grouped %} data-swap-group="{{ id }}" {% endif %}>
<span class="accordion_item_heading_inner">
<span class="accordion_item_heading_label">
<span class="accordion_item_heading_title">{{ item.title }}</span>
</span>
<span class="accordion_item_heading_icon"></span>
</span>
</button>
</{{title?'h3':'h2'}}>
<div class="js-accordion-content accordion_item_content">
<div class="accordion_item_content_text typography">
{{ item.description }}
</div>
{% if item.image %}
<div class="accordion_item_content_media">
<figure class="accordion_item_content_figure">
{% include '@partial-image' with {
class: 'accordion_item_content',
alt: item.alt,
image: item.image,
loading: 'lazy',
sources: [
img.wide.med,
img.wide.sml,
img.wide.xsml,
img.wide.xxsml
],
sizes: [
'(min-width: 1394px) 632px',
'(min-width: 1220px) 552px',
'(min-width: 980px) 442px',
'(min-width: 740px) 332px',
'90vw'
]
} %}
</figure>
</div>
{% endif %}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<!-- END: Accordion -->
No notes defined.