FAQs or any page with many sections that might require a lot of scrolling.
The Accordion and Tabs components are similar: both collapse sections of content until the user clicks a label to reveal it.
What's the difference between Accordions and Tabs? Accordions are best when the labels are long, like on an FAQ page. Tabs are best with short labels (up to 3 words).
The two components are interchangeable; if you start out with Tabs and decide you really need an Accordion, just switch the Type dropdown menu to Accordion.
Accordion
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id consequat nibh. Duis scelerisque, ligula auctor tristique mattis, lorem velit ultricies purus, ac tincidunt mi nisi eget neque. Nullam lobortis lacus quis feugiat placerat. Pellentesque diam elit, euismod sed nulla a, sagittis facilisis neque. Phasellus sed tellus dictum, blandit quam sit amet, consequat erat. Etiam sit amet suscipit neque. Maecenas ultrices tortor et sapien dapibus fermentum. Aliquam ornare pretium placerat. Nulla nec nibh in tellus ornare porta at in tellus.
Aliquam ultrices, est sit amet volutpat volutpat, purus lectus tempor eros, cursus bibendum velit leo sed arcu. Quisque eget nisl eget sem convallis tincidunt. Praesent lorem dui, suscipit in sollicitudin eu, blandit venenatis libero. Mauris mollis non ex placerat euismod. Quisque at enim quis erat euismod semper non sed odio. Etiam sollicitudin scelerisque convallis. Donec at metus eros. Nullam pellentesque tellus eros, quis faucibus urna cursus eget. Nunc vel fringilla dui, quis maximus purus. Morbi vitae posuere quam, eu laoreet odio. Aliquam ultrices nulla eget elit mollis consectetur. Integer facilisis turpis eu ex laoreet, quis efficitur enim porta. Curabitur neque purus, mollis eget gravida condimentum, sollicitudin ac lectus.
You can add Anchors to text if you want to link directly to a particular section. For example, if we wanted to send a user directly to the second accordion section below, we would select the anchor from the Standard menu, and add the label "section-2" (without the quotes, all lowercase, no spaces) to the Anchor field. We can then add the link label to an internal link to that page, or construct the link below. Click to try it out.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id consequat nibh. Duis scelerisque, ligula auctor tristique mattis, lorem velit ultricies purus, ac tincidunt mi nisi eget neque. Nullam lobortis lacus quis feugiat placerat. Pellentesque diam elit, euismod sed nulla a, sagittis facilisis neque. Phasellus sed tellus dictum, blandit quam sit amet, consequat erat. Etiam sit amet suscipit neque. Maecenas ultrices tortor et sapien dapibus fermentum. Aliquam ornare pretium placerat. Nulla nec nibh in tellus ornare porta at in tellus.
Tab 2
Aliquam ultrices, est sit amet volutpat volutpat, purus lectus tempor eros, cursus bibendum velit leo sed arcu. Quisque eget nisl eget sem convallis tincidunt. Praesent lorem dui, suscipit in sollicitudin eu, blandit venenatis libero. Mauris mollis non ex placerat euismod. Quisque at enim quis erat euismod semper non sed odio. Etiam sollicitudin scelerisque convallis. Donec at metus eros. Nullam pellentesque tellus eros, quis faucibus urna cursus eget. Nunc vel fringilla dui, quis maximus purus. Morbi vitae posuere quam, eu laoreet odio. Aliquam ultrices nulla eget elit mollis consectetur. Integer facilisis turpis eu ex laoreet, quis efficitur enim porta. Curabitur neque purus, mollis eget gravida condimentum, sollicitudin ac lectus.
Vertical Style Variation
Use the Vertical tab style to stack the tab buttons vertically to the left of the content instead of horizontally across the top. This style is best used on one-column pages. See Reed's academic program pages for a great example.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin id consequat nibh. Duis scelerisque, ligula auctor tristique mattis, lorem velit ultricies purus, ac tincidunt mi nisi eget neque. Nullam lobortis lacus quis feugiat placerat. Pellentesque diam elit, euismod sed nulla a, sagittis facilisis neque. Phasellus sed tellus dictum, blandit quam sit amet, consequat erat. Etiam sit amet suscipit neque. Maecenas ultrices tortor et sapien dapibus fermentum. Aliquam ornare pretium placerat. Nulla nec nibh in tellus ornare porta at in tellus.
Tab 2
Aliquam ultrices, est sit amet volutpat volutpat, purus lectus tempor eros, cursus bibendum velit leo sed arcu. Quisque eget nisl eget sem convallis tincidunt. Praesent lorem dui, suscipit in sollicitudin eu, blandit venenatis libero. Mauris mollis non ex placerat euismod. Quisque at enim quis erat euismod semper non sed odio. Etiam sollicitudin scelerisque convallis. Donec at metus eros. Nullam pellentesque tellus eros, quis faucibus urna cursus eget. Nunc vel fringilla dui, quis maximus purus. Morbi vitae posuere quam, eu laoreet odio. Aliquam ultrices nulla eget elit mollis consectetur. Integer facilisis turpis eu ex laoreet, quis efficitur enim porta. Curabitur neque purus, mollis eget gravida condimentum, sollicitudin ac lectus.