Skip to content

Accordion


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.


- - -

 

Web Team

Call us: For urgent requests or to speak with someone directly,
please contact one of our team members.
 
Still not sure how to do something? Submit an online enquiry.