Zion Builder

Appearance

Return to top
On this page

Accordion

Accordion element

General info

The accordion element allows you to display text ( or nested elements with Zion Builder PRO ) in a collapsed manner. This allows the users of your website decide if they want to expand the accordion to see the content or not.

Using PRO you are not limited by just text as the accordion content and you can add any other Zion Builder element.

TIP

When activating Zion Builder PRO, all accordion text content will be converted automatically into text elements that can be individually configured.

Difference between Accordion and Toggle

  1. Accordion - Only one item will be expanded. When expanding a new item, the item that is open will be collapsed
  2. Toggle - Any number of accordion items can be expanded on the same time.

General options

Accordions

  1. Accordions - This options allows you to add the accordion items
  2. Type - Choose if you want to display the accordions as individual content toggle or as accordion. See difference between Accordion and Toggle
  3. HTML tag - Select the desired HTML tag to use for the section wrapper element. Read more about HTML tags

Accordion

  1. Title - Set the desired accordion title
  2. Content Free Plugin - Set the desired accordion content. This option will be missing if using Zion Builder PRO as the content is built using other Zion Builder elements.
  3. Active by default - Select yes if you want the accordion to be expanded by default
  4. HTML tag for titles - Choose the desired HTML tag for accordion title

Style options

TIP

Zion Builder elements allows you to style almost every part of an element. All style options follow the same options structure. You can find more info about style options here

Accordions

  1. Wrapper - Will style the wrapper of the element.
  2. Single accordion wrapper - Allows you to style the wrapper for all accordion children
  3. Title styles - Allows you to style the accordion titles
  4. Active accordion title styles - Allows you to style the accordion titles while the accordion is active/expanded
  5. Content styles - Allows you to style the accordion content

Accordion

  1. Wrapper - Will style the wrapper of the element.

Advanced options

TIP

All the options inside the advanced options tab are the same for all elements. You can find more info about advanced options here