Accordions/Tabs

Closed Accordions

  • Accordions have heading and content fields. This is a heading!

    This is a content field! Accordions are helpful for hiding information that will only be relevant to a certain section of visitors. Or adding lots of content to a single page and letting the users select what they’d like to see.

  • Closed accordions only show the heading at first, but can be clicked to display the content

    Additional accordions can be added within the content block with “Add Item”.

Open Accordions

  • In open accordions, both the heading and the content fields are visible

    By default, accordions are closed on load, but this can be toggled for each accordion item.

  • Open accordions can be helpful structure to add to a long page

    Users can close accordions they’ve read or aren’t interested in.

  • Third Open Accordion

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs with first item open on load

  • This is a tab

    Tabs have identical structures to accordions in the admin portal, but present differently on the actual site. Only one item can display at a time. The item that initially displays is controlled by the “open on load” toggle.┬áIf you choose multiple tab items to be open on load, the first “open” item’s content will display.

  • Here's the second item in a tab content block

    Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Tabs with the second item open on load

  • Be careful about putting too much content in each individual tab item

    You don’t want to make users scroll back up the page too far in order to select new tabs

  • Tabs are useful for subdividing a page's contents

    Content can be hidden in tabs, and only displayed if a particular user wants more information about that tab’s subject.

Tabs with nothing open on load

  • You don't need to have any tab content displaying on load

    If all tab items have “Open on Load?” toggled to “No”, then no content field will display until a first selection is made by the user.

  • Lorem

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.