Accordions and Tabs let you organize a large amount of content on a single page, including options to add panels, customize each panel's content, link directly to a specific panel via anchor URL, switch formats, and manage page load speed. This article walks through each customization step.
đź’ˇQuick answers
- Adding panels or tabs to the element? Click the Add Panel (Accordion) or Add Tab (Tabs) button. New sections default to 'New Panel' and can be renamed via the panel settings icon.
- Where does a panel or tab get renamed? Click the panel's settings icon (each panel has its own icon, separate from the element-level icon) and update the title.
- Can a link target a specific panel directly? Yes. On the live page, right-click the panel title and copy the link address (it looks like www.site.org/page#fs-panel-12345). For same-page links, change #fs-panel-12345 to #fsEl_12345 (the letter after #fsE is a lowercase L).
- Switching between Accordion and Tabs format? Open Panel Group element settings and choose the alternate format. Content is preserved during the switch.
- Why do pages load slowly with Tabs or Accordions? All panel content loads at page load, even hidden panels. Avoid putting many large media objects inside one element.
- Why doesn't an anchor link to a nested panel work? Anchor links don't work for Tabs or Accordion elements nested inside other Tabs or Accordion elements. Only initially-visible panels respond, and panels only auto-expand when linked from another page.
What are Elements?
Elements are the fundamental building blocks of your Composer pages. Learn more about how elements work in the article, "Understanding elements" and read about each of the 5 tabs in the element library: Standard, Module, Layout, Social, and Shared.
In this Article
- Customize the element
- Customize each panel
- Reorder panels
- Linking to a specific panel
- Switch between Accordion or Tabs format
- Page load speed
Add an Accordion or Tabs element to the page or banner. You'll find them in the “Layout” section of the elements picker.
Customize the element
Click the “Add Panel” or “Add Tab” button to add additional sections to the element, if desired. By default, these will be named “New Panel.”
Customize each panel
Important Note
Each panel has a settings icon, and the tabs or accordion element itself has its own settings icon.
To edit a panel's title, click the corresponding panel settings icon.
Expand out a panel by clicking on the panel name to customize which elements will display there. If it was just created, it will automatically contain a single Content element. Add one or more elements of any type to the panel. You can then customize the element within the panel, and repeat for the other panels.
Reorder panels
To reorder your accordion panels, close the panels and find the element icons by hovering over the top right corner of each panel. Grab the "move" icon to drag-and-drop the panel where you want.
Linking to a specific panel
With so much content on one page, you may find you want to link to a specific panel rather than the page itself. Each panel has a built-in anchor link that you can use to automatically expand a particular panel on the page.
To find this link, visit the live version of the page with the Tabs or Accordion element. Right-click on the panel title and select “Copy Link Address” (Chrome), “Copy Link” (Safari), “Copy Link Location” (Firefox), or its equivalent in your browser of choice. On the Add Link menu, paste the link into the URL field. The URL should look something like www.site.org/page#fs-panel-12345. If you are linking to a panel on the same page as the link, change the #fs-panel-12345 to #fsEl_12345.
Please note the letter after #fsE is a lowercase "L"
Important Note
This link will not work for Tabs or Accordion elements that are inside of other Tabs or Accordion elements. Only panels that are initially displayed on the page when it is loaded will respond to the anchor link. Additionally, panels will only expand when linked to from another page.Â
Switch between Accordion or Tabs format
As you customize your page, see which you prefer. A Tabs element may function better in a wider column, while Accordions do well in both and can open nicely in narrower columns.Â
Page load speed
Any content that you put inside a Tabs or Accordion element will load when the page loads, even if the tab/accordion is not visible! In other words, all of your tab/accordion content will load at the same time. If you create an element with a large number of containers and then put a large media object in each one, all of those media objects will load at the same time when the browser requests the page.
Comments
Please Sign in to leave a comment if you don't see the comment box below.