<div class="o-accordion ">
<h2>
<button class="o-accordion__button js-accordion-toggle " aria-expanded="false" data-targetid="panel-id" data-closedelay="5">
Button targeting ID
<span class="o-accordion__icon" aria-hidden="true">
<span class="c-directions__accordion-icon" aria-hidden="true">
<svg width="14" height="15" viewbox="0 0 14 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 7L14 7" class="u-ct-stroke" />
<path d="M7 14.1421L7 -4.62532e-05" class="u-ct-stroke" />
</svg>
</span>
</span>
</button>
</h2>
<div id="panel-id" class="o-accordion__panel js-accordion-panel " aria-hidden="true" tabindex="-1">
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
</div>
</div>
{% set btnExpanded = openDefault == 'true' ? 'true' : 'false' %}
{% set panelExpanded = openDefault == 'true' ? 'false' : 'true' %}
{% if btnAfter %}
{% set panelID = panelID is defined ? panelID : 'accordion-panel-' ~ random(5000) %}
{% endif %}
<div class="o-accordion {{ classes }}">
{% if not btnAfter %}
{% if hTag %}<{{ hTag }}{% if hTagClasses %} class="{{ hTagClasses}}"{% endif %}>{% endif %}
<button class="o-accordion__button js-accordion-toggle {{ buttonClasses }}{% if openDefault %} is-open{% endif %}{% if autoClose %} js-accordion-auto-close{% endif %}{% if closeOutsideClick %} js-accordion-close-outside-click{% endif %}{% if inlineButton %} o-accordion__button--inline{% endif %}" aria-expanded="{{ btnExpanded }}" {% if panelID %} data-targetid="{{ panelID }}" {% endif %} {% if closeDelay %} data-closedelay="{{ closeDelay }}" {% endif %}>
{% block buttonContent %}
{{ title }}
{% if icon %}
<span class="o-accordion__icon" aria-hidden="true">
{% block icon %}
<span class="c-directions__accordion-icon" aria-hidden="true">
{% include "03-icons/plus" %}
</span>
{% endblock %}
</span>
{% endif %}
{% endblock %}
</button>
{% if hTag %}</{{ hTag }}>{% endif %}
{% endif %}
<div
{% if panelID or btnAfter %}id="{{ panelID }}" {% endif %}
class="o-accordion__panel js-accordion-panel {{ panel_classes }}{% if openDefault %} is-open can-animate{% endif %}"
aria-hidden="{{ panelExpanded }}"
tabindex="-1"
>
{% block accordionContent %}
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec odio. Quisque volutpat mattis eros. Nullam malesuada erat ut turpis. Suspendisse urna nibh, viverra non, semper suscipit, posuere a, pede.</p>
<p>Donec nec justo eget felis facilisis fermentum. Aliquam porttitor mauris sit amet orci. Aenean dignissim pellentesque felis.</p>
{% endblock accordionContent %}
</div>
{% if btnAfter %}
{% if hTag %}<{{ hTag }}{% if hTagClasses %} class="{{ hTagClasses}}"{% endif %}>{% endif %}
<button class="o-accordion__button js-accordion-toggle {{ buttonClasses }}{% if openDefault %} is-open{% endif %}{% if autoClose %} js-accordion-auto-close{% endif %}" aria-expanded="{{ btnExpanded }}" data-isafter="true" data-targetid="{{ panelID }}" {% if closeDelay %} data-closedelay="{{ closeDelay }}" {% endif %}>
{% block buttonContent %}
{{ title }}
{% if icon %}
<span class="o-accordion__icon" aria-hidden="true">
{% block icon %}
<span class="c-directions__accordion-icon" aria-hidden="true">
{% include "03-icons/plus" %}
</span>
{% endblock %}
</span>
{% endif %}
{% endblock %}
</button>
{% if hTag %}</{{ hTag }}>{% endif %}
{% endif %}
</div>
{
"pageColorTheme": "teal",
"title": "Button targeting ID",
"closeDelay": "5",
"hTag": "h2",
"panelID": "panel-id",
"icon": "{% block accordionContent %}"
}
// MINIMUM STYLES
.o-accordion__button {
position: relative;
min-height: 4.4rem;
}
.o-accordion__button--inline {
display: inline-flex;
align-items: center;
}
.o-accordion__panel {
display: none;
&.is-open {
display: block;
}
}
.o-accordion__panel--animate {
max-height: 0;
overflow: hidden;
transition: max-height 0.3s ease-in-out;
padding: 2rem;
background-color: grey;
&.can-animate {
max-height: 100rem;
overflow: hidden;
}
}
.o-accordion__icon {
position: absolute;
right: 1.2rem;
top: 50%;
transform: translateY(-50%);
display: block;
transition: transform 0.3s ease-in-out;
.is-open & {
transform: translateY(-50%) rotate(45deg);
}
}
.o-accordion__icon--inline {
position: relative;
right: auto;
top: -0.3rem;
transform: none;
display: inline-block;
margin-left: 1.2rem;
.is-open & {
transform: rotate(45deg);
}
svg {
display: block;
}
}
This component contains the base markup for an accordion item.