Customize an Accordion or Tabs element

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.

First, add an Accordion or Tabs element to the page or banner. You'll find them in the “Layout” section of the elements picker.

accordiontabs1.png

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.”

To edit a panel's title, click the corresponding panel settings icon. Note: Each panel has a settings icon, and the tabs or accordion element itself has its own settings icon.

accordiontabs2.png

To customize a panel, first make sure that it's expanded. You can expand the panel by clicking on the panel name. If it was just created, it will already 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.

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.

accordiontabs3.png

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.

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.

Was this article helpful?
3 out of 3 found this helpful
Have more questions? Submit a request

Comments

0 comments

Please Sign in to leave a comment if you don't see the comment box below.