Accordion
- Accordion - Simple
- Accordion - Initial Item Expanded
- Accordion - Open All
- Accordion - Small (recommended for additional one off read more sections)
- Accordion - Small Multi (recommended for longer titles and FAQ pages)
- Accordion - Extra Small (for additional one off 'read more' sections with short titles)
- Accordion - with secondary heading
- Accordion - as a series of steps
Page internal links to: Leaf 1, Leaf 2, Leaf 3, Leaf 4, Leaf 5, Leaf 6, Leaf 7.
Accordion Simple
-
Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion with Item Initially Expanded
To make an accordion item expand initially, give the anchor link a class of 'ui-state-active'.
-
Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion with Open All
The links below provide access to information and resources for students to support their learning experience at the University of Adelaide.
-
Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion Small
This pattern is recommended for additional one off 'read more' sections. This pattern must be used instead of the 'Extra Small' accordion if the title is longer than two words.
-
Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion Small Multi
Recommended for FAQs. These should only be used when the accordion title is going to be of a reasonable length.
-
Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion Extra Small
This pattern is only to be used for additional one off 'read more' sections. You should not use it for accordions that will have a long title, as they will be extremely hard to read. The Small Accordion should be used for longer accordion titles.
-
Read more
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion with Secondary Heading
Recommended for use when the content title requires a secondary text heading.
-
Accordion item #1The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #2The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #3The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #4The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #5The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #6The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Accordion item #7The Second item
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
Accordion with Text Above Title
Recommended for use when the content is set out in a series of steps.
-
Step 1Accordion item #1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
- Bullet point list - copy me then paste me where you want me to go!
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 2Accordion item #2
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 3Accordion item #3
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 4Accordion item #4
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 5Accordion item #5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 6Accordion item #6
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
-
Step 7Accordion item #7
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed neque ipsum, gravida non eleifend vitae, ultrices vel lorem.
Donec porttitor elementum metus, eget varius sapien sodales sit amet. Mauris felis enim, ornare sed faucibus sed, lobortis sit amet nisl.
- - -
