An accordion is available as a snippet in Modern Campus CMS.
It works well for organizing content, like FAQs (frequently asked questions), into a stack of vertical tabs that are expandable.
<div class="ContentBlock accordion">
<ul id="accordion-group-11" class="accordion-group" data-allow-toggle>
<li id="item-4" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-4" id="heading-4" type="button">
<span class="material-symbols-outlined" style="padding-right:6px">monitor</span>
<span class="accordion-title">
100% Online Program
</span>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
<g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
<path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
<path d="m0 0h24v24h-24z" />
</g>
</svg>
</span>
</button>
</div>
<div id="panel-4" role="region" aria-labelledby="heading-4" class="accordion-panel hidden">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?
</div>
</li>
<li id="item-5" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-5" id="heading-5" type="button">
<span class="material-symbols-outlined" style="padding-right:6px">monitor</span>
<span class="accordion-title">
100% Online Program
</span>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
<g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
<path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
<path d="m0 0h24v24h-24z" />
</g>
</svg>
</span>
</button>
</div>
<div id="panel-5" role="region" aria-labelledby="heading-5" class="accordion-panel hidden">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?
</div>
</li>
<li id="item-6" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-6" id="heading-6" type="button">
<span class="material-symbols-outlined" style="padding-right:6px">monitor</span>
<span class="accordion-title">
100% Online Program
</span>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
<g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
<path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
<path d="m0 0h24v24h-24z" />
</g>
</svg>
</span>
</button>
</div>
<div id="panel-6" role="region" aria-labelledby="heading-6" class="accordion-panel hidden">
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?
</div>
</li>
</ul>
</div>
<script type="text/javascript">
missouristate.requireScript("../../scripts/components/collapsible.js", false);
</script>
<div class="ContentBlock accordion">
<ul id="accordion-group-{{pageId}}" class="accordion-group" data-allow-toggle {{#if allowMultiple}} data-allow-multiple {{/if}}>
{{#each item}}
<li id="item-{{pageId}}" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-{{pageId}}" id="heading-{{pageId}}" type="button">
{{#if online}}
<span class="material-symbols-outlined" style="padding-right:6px">monitor</span>
{{/if}}
<span class="accordion-title">
{{heading}}
</span>
<span class="accordion-icon">
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8">
<g fill="none" fill-rule="evenodd" transform="translate(-6 -8)">
<path class="arrow" fill="#000" fill-rule="nonzero" d="m16.59 8.59-4.59 4.58-4.59-4.58-1.41 1.41 6 6 6-6z" />
<path d="m0 0h24v24h-24z" />
</g>
</svg>
</span>
</button>
</div>
<div id="panel-{{pageId}}" role="region" aria-labelledby="heading-{{pageId}}" class="accordion-panel hidden">
{{{container}}}
</div>
</li>
{{/each}}
</ul>
</div>
<script type="text/javascript">
missouristate.requireScript("{{path '/scripts/components/collapsible.js'}}", false);
</script>
{
"pageId": 11,
"allowMultiple": false,
"item": [
{
"pageId": 4,
"online": true,
"heading": "100% Online Program",
"container": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?"
},
{
"pageId": 5,
"online": true,
"heading": "100% Online Program",
"container": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?"
},
{
"pageId": 6,
"online": true,
"heading": "100% Online Program",
"container": "Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore vitae dicta odio debitis sint, modi vel quasi veritatis? Fugit eum aspernatur dolor corporis maxime impedit perferendis aperiam odio deserunt. Ipsa?"
}
],
"online": true
}