Usage and Tips

##Usage
Accordion is great for revealing information which is related to:

• displaying lists that learners can explore. Your heading works as the list item, and when it’s selected, learners find out more detail;
• showing ordered processes, providing more information about each stage for interested learners;
• providing learning introductions or summaries—use the headings to introduce a topic, then give more detail on selection.

###Layouts Single or spanned (full width).

###Mobile fall-back If spanned, it will resize to a single width

##Tips

Here are some techniques for getting the most from Accordion:

• If you need to present a list which in itself is informative, but which can be explored in more detail then the Accordion is a good choice. For example, you might wish to summarise the key learning points at the end of an Adapt page with an Accordion. The list of headings acts as a useful reminder of what was important on the page, with the added advantage that upon selection the reader can read a short summary of the key learning point.
• As similar approach can be employed for describing steps within a process. Each Accordion heading provides the overview of the entire process, upon selection of a stage heading a more detailed overview can be read. This approach lends itself more towards:
  • simple processes which aren’t reliant on accompanying visuals to comprehend
  • are matched with another component which is providing the accompanying visual explanation
  • are summaries of a more detailed exploration which has already been presented (see point above)
• The manner in which the Accordion expands to reveal display text can have a significant effect on the look of a page. Accordions which either contain lots of headings and/large amounts of display text will mean that:
  • Your block heights will be need to change to accommodate the Accordion and this may have an impact if your using Block and Article background graphics which will be definition be of a fixed height.
  • If you’re using a single width Accordion the component that shares the block will potentially have a lot of wasted space below it.
    You can limit the impact of these constraints by either using spanned Accordions when you want to present lots of display text (but remember that spanned becomes single on mobile) or if using single width then limit both the number of headings and the amount of display text.
• Single width Accordions will also limit the amount of space each item has for titles so keep headings relatively short (Verification of text wrapping behavior is needed).
• Too many Accordion items can also mean that the entire component will not display within the viewport, again, this issue is exacerbated when single width and particularly so when being viewed on a mobile. A maximum of six headings is a good guideline to keep in mind
• Graphics within Accordions can work well but should be used with care when being added to single width Accordions for all the reasons stated in the points above.