Customize an Accordion or Tabs element

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

Accordions and Tabs are a great way to organize a large amount of content on a single page. You can add and customize as many panels or tabs as you want (although you may experience some quirky behavior with too many in one element) and easily switch between the two types of elements without losing your content.

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

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"

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.