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.
- Handle: @accordion--default
- Variants (2): Default , Online
- Preview:
- Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/accordion/accordion.hbs
- Referenced by (8): @col-50-section, @col-50-section--divider, @col-50-section--divider-bordered, @col-50-section--divider-shaded, @col-50-section--bordered, @col-50-section--shaded, @mlp-grids-col-snippets-components, @mlp-grids-col-snippets-components--mlp-wp
<div class="ContentBlock accordion">
<ul id="accordion-group-10" class="accordion-group" data-allow-toggle>
<li id="item-1" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-1" id="heading-1" type="button">
<span class="accordion-title">
Accordion 1
</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-1" role="region" aria-labelledby="heading-1" class="accordion-panel hidden">
<div class="ContentBlock tout Horz">
<div class="image-container">
<img class="image" src="http://picsum.photos/1920/1080?random" alt="">
</div>
<div class="container">
<div class="eyebrow">Lorem ipsum dolor</div>
<h3 class="headline"><a href="#">Lorem ipsum dolor sit amet consectetur</a></h3>
<p class="description">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.
</p>
</div>
</div>
</div>
</li>
<li id="item-2" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-2" id="heading-2" type="button">
<span class="accordion-title">
Accordion 2
</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-2" role="region" aria-labelledby="heading-2" 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-3" class="accordion-item">
<div role="heading" aria-level="2">
<button aria-expanded="false" class="accordion-heading" aria-controls="panel-3" id="heading-3" type="button">
<span class="accordion-title">
Accordion 3
</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-3" role="region" aria-labelledby="heading-3" 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": 10,
"allowMultiple": false,
"item": [
{
"pageId": 1,
"heading": "Accordion 1",
"container": "<div class=\"ContentBlock tout Horz\">\n <div class=\"image-container\">\n <img class=\"image\" src=\"http://picsum.photos/1920/1080?random\" alt=\"\">\n </div>\n <div class=\"container\">\n <div class=\"eyebrow\">Lorem ipsum dolor</div>\n <h3 class=\"headline\"><a href=\"#\">Lorem ipsum dolor sit amet consectetur</a></h3>\n <p class=\"description\">\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quam lectus, pretium eget massa nunc.\n </p>\n </div>\n</div>\n"
},
{
"pageId": 2,
"heading": "Accordion 2",
"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": 3,
"heading": "Accordion 3",
"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?"
}
]
}