Tabs and Accordions Drupal 7
Summary
Accordions and Tab/Accordions allow you to organize information on a page so that only the first entry is visible, and the other entries are visible when the user clicks on the tab. Tabs are arranged horizontally on the page, next to each other. Accordions are arranged vertically, one after another.
Tabs work best when the heading is very short, like A-Z lists. Accordions are suited to FAQs and procedural information. Accordions and Tab/Accordions are available on Landing Pages and Site Pages.
Tabs become accordions on mobile devices, which is why they are called Tab/Accordions.
Audience
All users of the Digital Commons Platform for the site page option, Site Managers and Site Admins for the Landing Page option.
Video
[video:https://www.youtube.com/watch?v=hFqevV80LAE]
Adding a Tab/Accordion to a Site Page
The Add Tabs/Accordion feature is at the bottom of the Site Page form, next to the Add Accordion button.
1. Click the button for Add Tabs/Accordion.
2. Fill out the information for the first tab.
A. Fill in a Title for the tab group, if desired. In this example, the Tab Accordion is a glossary, so it's titled "Definition of Terms."
B. Enter a Tab Title for the first tab.
C. Generally the content of a tab is text entered into the Text Editor/WYSIWYG. You have the option to choose from existing Blocks, such as CTAs or Article cards to be the main content of a tab.
D. Enter the tab content.
E. Blocks are also available as a Sidebar.
3. Click the Add another item button to add another tab.
4. Fill in the second tab.
5. You can reorder the individual tabs within the group by dragging on the control dots.
6. Repeat for as many tabs as are desired, and click the Save button.
When published, the first tab is highlighted on the page below the WYSIWYG content.
When the user clicks on the next tab, its associated information is visible.
Removing Tabs
Click the Remove button underneath a specific tab to remove only that tab, or the Remove button underneath the tab group to remove the entire set.
Adding an Accordion to a Landing Page
The process is similar to the Tab Accordion.
1. In the Band type area, select Accordion and click Add another Band.
2. Fill out the information for the first item.
A. Fill in a Title for the accordion group, if desired.
B. Enter a Title for the first accordion item.
C. You can choose from existing Blocks, such as CTAs or Article cards.
D. Enter the item content.
3. Click the Add another item button to add another accordion item.
4. You can reposition the accordion group on the page by dragging the dots on the left, and reorder the individual items within the group the same way.
5. Repeat for as many accordion items as are desired, and click the Save button.
The accordion items appear vertically, rather than side-by-side. The first item is open by default:
Clicking on another item opens that information and closes the other one.. The plus sign (+) next to the item indicates there is more information.
Removing Accordions
Click the Remove button underneath a specific accordion item to remove only that item, or the Remove button underneath the accordion group to remove the entire set.
More Examples
Accordion with a CTA card selected as the Block.
Tab/Accordion with a CTA card selected as the Sidebar.
