<button class="accordion-toggle-all btn btn-link align-right" type="button" data-accordion-toggle-all data-accordion-target="accordionaccordionExample" data-label-expand="Expand all" data-label-collapse="Collapse all" aria-expanded="false">
Expand all
</button>
<div class="accordion" id="accordionaccordionExample">
<div class="card accordion_item">
<div class="card-header" id="headingone">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapseone" aria-expanded="true" aria-controls="collapseone">
<span class="accordion-button-text">
This is the accordion heading 1
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapseone" class="collapse show" aria-labelledby="headingone">
<div class="card-body">
This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
</div>
</div>
</div>
<div class="card accordion_item">
<div class="card-header" id="headingtwo">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">
<span class="accordion-icon" aria-hidden="true">
<i class="fas fa-brain"></i>
</span>
<span class="accordion-button-text">
This is the accordion heading 2
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapsetwo" class="collapse" aria-labelledby="headingtwo">
<div class="card-body">
This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
</div>
</div>
</div>
<div class="card accordion_item">
<div class="card-header" id="headingthree">
<h3 class="mb-0">
<button class="btn btn-link btn-block text-left accordion-btn" type="button" data-toggle="collapse" data-target="#collapsethree" aria-expanded="false" aria-controls="collapsethree">
<span class="accordion-button-text">
This is the accordion heading 3
</span>
<i class="fas fa-chevron-down"></i>
<span class="sr-only">Show the content</span>
</button>
</h3>
</div>
<div id="collapsethree" class="collapse" aria-labelledby="headingthree">
<div class="card-body">
This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.
</div>
</div>
</div>
</div>
{% set accordion_allow_multiple = accordion_allow_multiple|default(true) %}
{% set accordion_show_toggle_all = accordion_show_toggle_all|default(true) %}
{% set accordion_toggle_all_label_expand = accordion_toggle_all_label_expand|default('Expand all') %}
{% set accordion_toggle_all_label_collapse = accordion_toggle_all_label_collapse|default('Collapse all') %}
{% if accordion_show_toggle_all %}
<button class="accordion-toggle-all btn btn-link align-right" type="button" data-accordion-toggle-all data-accordion-target="accordion{{ accordion_name }}" data-label-expand="{{ accordion_toggle_all_label_expand }}" data-label-collapse="{{ accordion_toggle_all_label_collapse }}" aria-expanded="false">
{{ accordion_toggle_all_label_expand }}
</button>
{% endif %}
<div class="accordion" id="accordion{{ accordion_name }}">
{% block cms_override %}
{% for accordion_item in accordion_items %}
{% include "@accordion_item" with accordion_item|merge({
accordion_name: accordion_name,
accordion_allow_multiple: accordion_allow_multiple
}) %}
{% endfor %}
{% endblock cms_override %}
</div>
{
"accordion_name": "accordionExample",
"accordion_allow_multiple": true,
"accordion_show_toggle_all": true,
"accordion_toggle_all_label_expand": "Expand all",
"accordion_toggle_all_label_collapse": "Collapse all",
"accordion_items": {
"1": {
"accordion_heading": "This is the accordion heading 1",
"accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
"accordion_id": "one",
"accordion_active": true
},
"2": {
"accordion_heading": "This is the accordion heading 2",
"accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
"accordion_id": "two",
"accordion_icon": "fas fa-brain"
},
"3": {
"accordion_heading": "This is the accordion heading 3",
"accordion_content": "This is the accordion content. Nam ornare lorem ligula, nec molestie enim facilisis eu. Quisque mi tortor, aliquet sit amet commodo ac, facilisis ut metus. Aenean vestibulum viverra suscipit. Cras consequat sagittis pretium. Donec accumsan turpis in nulla lacinia maximus. Duis et malesuada metus. Donec convallis vel dolor non feugiat.",
"accordion_id": "three"
}
}
}
.accordion {
margin-bottom: $space_and_half;
.card {
box-shadow: unset;
}
}
.accordion-toggle-all {
margin-bottom: $space_one_half;
.fractal-preview & {
background-color: $accent_color;
background-color: var(--accent_color, $accent_color);
border: 1px solid $accent_color;
border: 1px solid var(--accent_color, $accent_color);
color: $base_font;
color: var(--base_font, $base_font);
&:hover,
&:focus {
background-color: $white;
background-color: var(--white, $white);
}
}
}
Display accordion list component.