Toggles Element

Last Update: July 26, 2025

The Toggles Element is a perfect way to add multiple sections of varied content to your website, while actively selecting which to show or hide at any time. Toggles will only allow one item to be open at a time, while Accordions will allow multiple open at one time.

Watch the video below for a visual overview of the Element, view the Element demo page for live examples, and read on to see the full list of options.

For privacy reasons YouTube needs your permission to be loaded.
View Element Page!
View Live Example!
View Avada Builder Elements!

How To Use The Toggles Element

To start, add the element into your desired column.

Configure the Toggle Element to your liking. There is a wide range of options to configure and style the Toggles Element, including styling the individual toggle items. Check out the full list of Element options below.

Parent Element Options

Note: The Default settings will use the global settings assigned for this element in the Options > Avada Builder Elements > Toggles section. Also, please note that the displayed options screens below show ALL the available options for the element. If you have Avada’s Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

HeadingDescription
Toggles or AccordionsToggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
Inactive IconClick an icon to select, click again to deselect.
Active IconClick an icon to select, click again to deselect.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

children

HeadingDescription
Add / Edit ItemsAdd or edit new items for this element. Drag and drop them into the desired order.

Design

HeadingDescription
Boxed ModeChoose to display items in boxed mode.
Boxed Mode Border WidthSet the border width for toggle item. In pixels.
Boxed Mode Border ColorSet the border color for toggle item.
Boxed Mode Background ColorSet the background color for toggle item.
Divider LineChoose to display a divider line between each item.
Divider Line ColorSet the color for divider line.
Toggle PaddingSet the padding for toggle items. Enter values including px or em units, ex: 20px, 2.5em.
Title TagChoose HTML tag of the toggle title, either div or the heading tag, h1-h6.
Title TypographyControls the typography of the title text. Leave empty for the global font family.
Toggle Icon SizeSet the size of the icon. In pixels, ex: 13px.
Toggle Icon ColorSet the color of icon in toggle box.
Toggle Icon Boxed ModeChoose to display icon in boxed mode.
Toggle Icon Inactive Box ColorControls the color of the inactive toggle box.
Toggle Icon AlignmentControls the alignment of toggle icon.
Content TypographyControls the typography of the content text. Leave empty for the global font family.
Toggle Hover Accent ColorControls the accent color on hover for icon box and title.
Toggle Active Accent ColorControls the accent color on active for icon box and title.

Child Element Options

General

HeadingDescription
TitleInsert the toggle title.
Open by DefaultChoose to have the toggle open when page loads.
Toggle ContentInsert the toggle content.
CSS ClassAdd a class to the wrapping child HTML element.
CSS IDAdd an ID to the wrapping child HTML element.

Design

HeadingDescription
Title TypographyControls the typography of the title text. Leave empty for the global font family.
Content TypographyControls the typography of the content text. Leave empty for the global font family.

In this article