Component
Accordions and Tabs
Best Use: FAQs or any page with many sections that require a lot of scrolling.
These two Components are very 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 a 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. Now the exact same content will be displayed as an Accordion.
Accordion
Example accordion section 1
Example accordion section 2
Optionally, set custom Anchor text for a section if you want to link directly to it. For example, if we wanted to send somebody a link directly to the second accordion section below, we would add the text "section-2" (without the quotes, all lowercase, no spaces) to the Anchor field of that section. We can then construct the link below. Click to try it out.
https://www.reed.edu/cascade-training/components/accordions-tabs.html#section-2
Tabs
Tab 1
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.