Accordions can be useful tools when you are presenting small chunks of clearly defined, related content, where it is likely that your audience is only interested in a few of those chunks.
Accordions allow users to expand and collapse different sections, letting them see all their choices and display only the information relevant to them.
Refer to https://www.nngroup.com/articles/accordions-complex-content/ for more information on how to use accordions properly.
Fields
- Teaser - the text to display
- Content - the main content to open up
Notes
- Accordions are advanced layout devices and should be used sparingly on our webpages. Please contact us to discuss using these on your site.
Examples
Please select your house to learn more:
-
Gryffindor
Gryffindor values bravery, daring, nerve and chivalry. The house mascot is the lion, and its colors are scarlet and gold.
-
Hufflepuff
Hufflepuff values hard work, dedication, patience, loyalty and fair play rather than a particular aptitude in its members. The house mascot is the badger, and canary yellow and black are its colours.
-
Ravenclaw
Ravenclaw values intelligence, knowledge and wit. Its house mascot is the eagle, and its colors are blue and bronze.
-
Slytherin
Slytherin house values ambition, cunning and resourcefulness. Its house mascot is the serpent, and its colors are emerald green and silver.
