Accordion/Tabs

Accordions and Tabs are features available within the Component Row and the Full-Width Row. 

A couple of features from the previous Flexbox template are included in the FTS template. Both Accordions and Tabs are unique ways to display mass amounts of information in collapsible, easy-to-read areas.

Accordion: An expandable section that organizes content in collapsible panes. This feature is suitable for FAQs or segmented information.

• Key Feature: You can "enable the first pane to be open" and "enable other panes to close when one is opened."
• There is a minimum of two panes. Each heading has a required Heading and Body Content.
• You can enable a wide Accordion, which is helpful for longer pane titles.

To add an Accordion to a Page:

1. Selection Accordion from either the Component Row or the Full-Width Row.
2. Add a Headline.
3. Add Body Content if necessary.
4. Choose how the panes are to be opened. Options include the first pane to automatically be open when the page loads, enable the panes to close when another one is open and enable wide accordions.
5. Add Pane with a Headline and Content.
6. Add additional Panes.

Auto-Opening Accordion Panels with Anchor Links

Using the "Anchor Navigation" component:

1. Choose "Yes" to display a list of anchor links at the top of your page content
2. Create a headline (required) for your component.
   1. We suggest "On This Page" since the content can only be linked to items found on the same page as the "Anchor Navigation" component.
3. Create your first anchor link by opening the "Navigation" panel within "Anchor Navigation" and add a name or title in the "Anchor Label" field (required)
4. Next, enter an "Anchor ID" (required)
   1. 1. The "Anchor ID" must be unique and will point the hyperlinked text to the correct component on the page.
      2. The help text "Enter a manual component ID" tells us what to look for when linking this to our designated component row or accordion pane.
5. Open or create an "Accordion" within either "Component Row" or "Full-Width Row"
6. Give that Accordion a Headline (required)
   1. NOTE: Inputting a manual idea under the Accordion Headline will only jump to this section and NOT open any panes.
7. Create your first accordion pane by opening "Pane"
8. Give that "Pane" a headline (required)
9. Manual ID: This is where you will input the "Anchor ID" that you created back in Step 4.

Using a "WYSIWYG" component:

1. Any text within a "WYSIWYG" component can be set as linkable text.
2. Highlight/select the text you would like to make clickable.
3. Navigate to your toolbar above, and click on the icon that looks like "chain links". This is the insert/edit link tool.
4. Enter an "Anchor ID" in the field labeled "Anchor".
   1. The "Anchor ID" must be unique and will point the hyperlinked text to the correct component on the page.
5. Click "Ok" to apply those changes.
6. Open or create an "Accordion" within either "Component Row" or "Full-Width Row"
7. Give that Accordion a Headline (required)
   1. NOTE: Inputting a manual idea under the Accordion Headline will only jump to this section and NOT open any panes.
8. Create your first accordion pane by opening "Pane"
9. Give that "Pane" a headline (required)
10. Manual ID: This is where you will input the "Anchor ID" that you created back in Step 4.

See Accordion Examples Component Row, Full-Width Row

Tabs: Organizes content into clickable tabs, aiding in structured navigation. These panels function much like browser tabs with a heading and related content all in one window.

• Key Feature: Users can switch between different headings to read further information.
• Make sure to keep the title short and concise. 
• There is a minimum of two tabbed panels and a recommended maximum of four panels so that all the information can be displayed in a singular line.
• Headlines are optional and will be featured in large text above the content within the Tab.

To add a Tab to a Page.

1. Select Tabs from either the Component Row or the Full-Width Row.
2. Add a required Headline.
3. Create first Tab with required Title and Content.
4. Add additional Tabs.

Naming Your Tabs.

To ensure the tabs function correctly, follow these naming guidelines:

• Do not start tab names with a number. HTML IDs cannot begin with a number, as this causes issues with the tabbing functionality.
• Start tab names with a letter instead. This aligns with valid HTML standards and will resolve the issue.

See Tabs Example: Component Row, Full-Width Row

Component Row Examples