An faq accordion is available as a component in Modern Campus CMS.
It works well for organizing FAQs (frequently asked questions), into a stack of vertical tabs that are expandable.
- Handle: @faq-accordion
- Preview:
- Filesystem Path: src/components/03-page-elements-and-patterns/content-structure/faq-accordion/faq-accordion.hbs
<div class='faq-accordion' itemscope='itemscope' itemtype='https://schema.org/FAQPage' data-component-name='FAQ-Details-Summary'>
<h3 itemprop='name'>FAQ Title</h3>
<p class='faq-description' itemprop='description'>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<details class='faq-accordion-item' itemscope='itemscope' itemprop='mainEntity' itemtype='https://schema.org/Question'>
<summary class='faq-accordion-header'>
<h4 itemprop='name'>This is the first question</h4>
</summary>
<div class='faq-accordion-content' itemscope='itemscope' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<div itemprop='text'>
<p>This is the first answer.</p>
<p><a href='https://www.missouristate.edu' class='button' itemprop='relatedLink'>Read more about it</a></p>
</div>
</div>
</details>
<details class='faq-accordion-item' itemscope='itemscope' itemprop='mainEntity' itemtype='https://schema.org/Question'>
<summary class='faq-accordion-header'>
<h4 itemprop='name'>This is the second question</h4>
</summary>
<div class='faq-accordion-content' itemscope='itemscope' itemprop='acceptedAnswer' itemtype='https://schema.org/Answer'>
<div itemprop='text'>
<p>This is the second answer.</p>
<p><a href='https://www.missouristate.edu' class='button' itemprop='relatedLink'>Read more about it</a></p>
</div>
</div>
</details>
</div>
<div
class='faq-accordion'
itemscope='itemscope'
itemtype='https://schema.org/FAQPage'
data-component-name='FAQ-Details-Summary'
>
<h3 itemprop='name'>{{faqTitle}}</h3>
<p class='faq-description' itemprop='description'>{{faqDescription}}</p>
{{#each items}}
<details
class='faq-accordion-item'
itemscope='itemscope'
itemprop='mainEntity'
itemtype='https://schema.org/Question'
>
<summary class='faq-accordion-header'>
<h4 itemprop='name'>{{faqQuestion}}</h4>
</summary>
<div
class='faq-accordion-content'
itemscope='itemscope'
itemprop='acceptedAnswer'
itemtype='https://schema.org/Answer'
>
<div itemprop='text'>
<p>{{faqAnswer}}</p>
<p><a
href='{{buttonURL}}'
class='button'
itemprop='relatedLink'
>{{buttonText}}</a></p>
</div>
</div>
</details>
{{/each}}
</div>
{
"faqTitle": "FAQ Title",
"faqDescription": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
"items": [
{
"faqQuestion": "This is the first question",
"faqAnswer": "This is the first answer.",
"buttonText": "Read more about it",
"buttonURL": "https://www.missouristate.edu"
},
{
"faqQuestion": "This is the second question",
"faqAnswer": "This is the second answer.",
"buttonText": "Read more about it",
"buttonURL": "https://www.missouristate.edu"
}
]
}