<div class="accordion accordion-flush accordion--first-open" id="accordionFlush0">
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-1">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-1" aria-expanded="false" aria-controls="flush-collapse0-1">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-1" class="accordion-collapse collapse" aria-labelledby="flush-heading0-1" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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>
<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.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-2">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-2" aria-expanded="false" aria-controls="flush-collapse0-2">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-2" class="accordion-collapse collapse" aria-labelledby="flush-heading0-2" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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>
<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.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading0-3">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse0-3" aria-expanded="false" aria-controls="flush-collapse0-3">
Accordion Short Title
</button>
</h2>
<div id="flush-collapse0-3" class="accordion-collapse collapse" aria-labelledby="flush-heading0-3" data-bs-parent="#accordionFlush0">
<div class="accordion-body text-content">
<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>
<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.</p>
</div>
</div>
</div>
</div>
<div class="accordion accordion-flush{% if first_accordion_open %} accordion--first-open{% endif %}" id="accordionFlush{{id}}">
{% set counter = 0 %}
{% for section in sections %}
{% set counter = counter + 1 %}
<div class="accordion-item">
<h2 class="accordion-header" id="flush-heading{{id}}-{{ counter }}">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapse{{id}}-{{ counter }}" aria-expanded="false" aria-controls="flush-collapse{{id}}-{{ counter }}">
{{ section.title }}
</button>
</h2>
<div id="flush-collapse{{id}}-{{ counter }}" class="accordion-collapse collapse" aria-labelledby="flush-heading{{id}}-{{ counter }}" data-bs-parent="#accordionFlush{{id}}">
<div class="accordion-body text-content">{{ section.content|raw }}</div>
</div>
</div>
{% endfor %}
</div>
{
"id": "0",
"first_accordion_open": true,
"sections": [
{
"title": "Accordion Short Title",
"content": "<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><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.</p>"
},
{
"title": "Accordion Short Title",
"content": "<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><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.</p>"
},
{
"title": "Accordion Short Title",
"content": "<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><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.</p>"
}
]
}
This is using the standard Bootstrap accordions (with the .accordion-flush modifier class to remove certain styles and render the accordions full-width): Bootstrap Accordion.
.index.scss file as @import "_core/accordion";<div class="paragraph-widget paragraph-widget--accordion">..ts file for the javascript is imported into the index.ts file as import accordionsInit from "./components/accordion"; and called as accordionsInit();