Add Accordion and Tabs

Abstract

Add composites to your site.

Accordion and Tabs are - like Carousel, Flip, and Snippet - composite renderings. A composite rendering enables you to compose a more complex rendering from other renderings.

The Accordion rendering lets you stack a list of collapsible sections either vertically or horizontally. You can use an accordion to display FAQs, sets of thumbnails, or divide longer documents in sections. Each section can be expanded to reveal the content associated with that item.

Collapsing a page with an accordion minimizes scrolling, which can be very useful for content-rich pages or on pages where the content is restricted to very small spaces, for example, on mobile devices. This allows people to decide what to read or what to ignore, and can make the webpage appear less overwhelming.

To add the Accordion rendering:

  1. Drag and drop the Accordion rendering to the page.

  2. In the Select the Associated Content dialog box:

    • To select an existing content item, click Select Existing Content, then click the content item that you want and click OK.

      For example, if you select an existing FAQ section, the FAQ content item automatically populates the accordion:

    CABD2F97309848BEABD198FAAD7E59EF.png
    519ECD63944347A5B575B0AA230342D6.png
    • To create new accordion content, click Create New Content and click OK and then to add an accordion section, click the plus button:

      CE5A3D7F48994443BBDC46084E076F87.png
  3. If you have added more than one accordion section, you can change the order of the sections by using buttons in the toolbar.

    542968E6DCC54B3A95C2C8BE3E2C3ED1.png

You can change how an accordion is displayed on the page.

To change an accordion's appearance:

  1. On the floating toolbar of the accordion, click Edit the Component Properties.

  2. In the Accordion Control section, determine the accordion's appearance by editing the following fields:

    • EasingFunction – click the type of expand/collapse animation. For example, swing, back, bounce, quint.

    • Animation Speed – specify the speed (in milliseconds) of the animation. For example, enter 600 for slow, 400 for normal, or 200 for fast.

    • Can Open Multiple – select to enable expanding multiple sections at the same time.

    • CanToggle – select to allow toggling of sections.

    • ExpandedbyDefault – select to have the first section expanded when you open the page.

    • ExpandonHover – select to expand sections when you hover your mouse over the section title.

    4F3B9C3F65EB44CAA4177CDF72AC3E8B.png
  3. In the Control Properties dialog box, in the Styling section, you can choose different styles for your accordion. For example, to have an accordion that is displayed horizontally, select Horizontal Accordion.

2658579D636F403F9D683FD36C6C2727.png
EF3C353B6DDF4605A0781946379B6080.png