<!-- Basic accordion -->
<div class="accordion" id="accordionExample">
<!-- Item -->
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="1">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-1" aria-expanded="true" aria-controls="collapse-1">
Accordion Item one!
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapse-1" aria-labelledby="1" data-bs-parent="#accordionExample">
<div class="accordion-body">This is the first item's accordion body. It is hidden by default, until the collapse
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="2">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
Accordion Item two!
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapse-2" aria-labelledby="2" data-bs-parent="#accordionExample">
<div class="accordion-body">This is the first item's accordion body. It is hidden by default, until the collapse
</div>
</div>
</div>
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="3">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
Accordion Item three!
</button>
</h2>
<div class="accordion-collapse collapse show" id="collapse-3" aria-labelledby="3" data-bs-parent="#accordionExample">
<div class="accordion-body">Meow
</div>
</div>
</div>
</div>
<!-- Basic accordion -->
<div class="accordion" id="accordionExample">
<!-- Item -->
{{#each listItems}}
<div class="accordion-item mb-3">
<h2 class="accordion-header" id="{{id}}">
<button
class="accordion-button"
type="button"
data-bs-toggle="collapse"
data-bs-target="#collapse-{{id}}"
aria-expanded="{{expanded}}"
aria-controls="collapse-{{id}}"
>
{{ accordion-title }}
</button>
</h2>
<div
class="accordion-collapse collapse show"
id="collapse-{{id}}"
aria-labelledby="{{id}}"
data-bs-parent="#accordionExample"
>
<div class="accordion-body">{{ accordion-text }}</div>
</div>
</div>
{{/each}}
</div>
{
"listItems": [
{
"id": 1,
"expanded": true,
"accordion-title": "Accordion Item one!",
"accordion-text": "This is the first item's accordion body. It is hidden by default, until the collapse\n"
},
{
"id": 2,
"expanded": false,
"accordion-title": "Accordion Item two!",
"accordion-text": "This is the first item's accordion body. It is hidden by default, until the collapse\n"
},
{
"id": 3,
"expanded": false,
"accordion-title": "Accordion Item three!",
"accordion-text": "Meow\n"
}
]
}
No notes defined.