Accordion

Accordions can help organize content so that is easy to navigate through. They are really useful when guiding the user through a step by step process. The user can only see the first section but when ready to move on the accordion can hide the already viewed section and show the new content without having to refresh the page. Accordions should hold only small amounts of information per section. If there is a lot of content in each section accordions can become hard to use.

Demo

• Title 1

  • Content 1 1
  • Content 1 2
  • Content 1 3

• Title 2

  • • Content xtra 2 1a

      • Content 2 1 1
      • Content 2 1 2
      • Content 2 1 3

    • Content xtra 2 1b

      • Content 2 2 1
      • Content 2 2 2
      • Content 2 2 3
  • Content 2 2
  • Content 2 3

• Title 3

  • Content 3 1
  • Content 3 2
  • Content 3 3

• Title 4

  • Content 4 1
  • Content 4 2
  • Content 4 3

• Title 5

  • Content 5 1
  • Content 5 2
  • Content 5 3