Accordion
An accordion is a group of collapsible panels containing content and links. They are useful when there is a lot of information that could overwhelm the user if displayed all at once. Accordions can group information into smaller digestible chunks.
<div class="faqs-wrapper" role="tablist" aria-multiselectable="true">
<div class="faq js-faq" role="tab">
<div class="faq-head" role="button" aria-expanded="false" aria-controls="faq-0">
<h3 class="has-text-weight-bold" id="faq-0-heading">What do I need to bring with me?</h3>
<i class="faq-arrow fas fa-chevron-down"></i>
</div>
<div id="faq-0" class="faq-body" role="tabpanel" aria-labelledby="faq-0-heading">
<div class="cms-content">
<p>You need to bring a copy of your personal itinerary, either printed or on a smartphone. This will be your timetable for the day - make sure you <a href="https://crm.dataharvesting.com/podCFSO/index/" title="book your place at the sessions you want to attend">book your place at the sessions you want to attend</a>.</p>
<p>If you're going to print your itinerary, we recommend doing it no sooner than one week before Applicant Day. This is because session locations may change.</p>
</div>
</div>
</div>
<div class="faq" role="tab">
<div class="faq-head" role="button" aria-expanded="false" aria-controls="faq-1">
<h3 class="has-text-weight-bold" id="faq-1-heading"> When does Applicant Day start and finish?</h3>
<i class="faq-arrow fas fa-chevron-down"></i>
</div>
<div id="faq-1" class="faq-body" role="tabpanel" aria-labelledby="faq-1-heading">
<div class="cms-content">
<p>The day will run from 9.00am to 4.00pm. You will need to book your own schedule for the day, including booking your place at your subject sessions and any other talks you'd like to attend. You can add events to your itinerary from the <a href="https://crm.dataharvesting.com/podCFSO/index/" title="booking page">booking page</a>.</p>
</div>
</div>
</div>
<div class="faq" role="tab">
<div class="faq-head" role="button" aria-expanded="false" aria-controls="faq-2">
<h3 class="has-text-weight-bold" id="faq-2-heading"> Which campus do I need to attend?</h3>
<i class="faq-arrow fas fa-chevron-down"></i>
</div>
<div id="faq-2" class="faq-body" role="tabpanel" aria-labelledby="faq-2-heading">
<div class="cms-content">
<p>Make sure you check the location of the sessions on your itinerary - you don't want to end up at the wrong campus! Some visitors will have to visit more than one campus on the day. The campuses you need to visit will be shown on your itinerary.</p>
</div>
</div>
</div>
<div class="faq" role="tab">
<div class="faq-head" role="button" aria-expanded="false" aria-controls="faq-3">
<h3 class="has-text-weight-bold" id="faq-3-heading"> Do I have to pay to travel between the campuses on Applicant Day?</h3>
<i class="faq-arrow fas fa-chevron-down"></i>
</div>
<div id="faq-3" class="faq-body" role="tabpanel" aria-labelledby="faq-3-heading">
<div class="cms-content">
<p>All our campuses are linked by the BROOKESbus U1 service. Just show the driver your Applicant Day guide, either printed or on a smartphone, for free travel for you and your guests.</p>
</div>
</div>
</div>
</div>Accordions are only necessary if the amount of content on a page is causing user’s to feel frustrated or overwhelmed and if your content can be organised into meaningful groups and easily identified by a title.
Do not change or override the default background colours.
Ensure you correctly apply the ARIA landmark roles and properties:
- The wrapping
divshould haverole="tablist"andaria-multiselectable="true" - Each tab should have
role="tab" - Each tab header should have
role="button" - Each button should have an
aria-controls=""with an unique id that matches the tabpanel id, i.e. faq-0 in the example - Each tab content should have
role="tabpanel" - Each tabpanel should have an
aria-labelledby=""with an unique id that matches the button heading id , i.e. faq-0-heading in the example