Home/Documentation/Builder/Elements/Design Elements/

Toggles Element

Last Update: February 20, 2023

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. Read below to discover more about this useful space saving Design Element.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

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. Default currently set to Accordions.
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. Each of the 3 sizes has a custom width setting on the Responsive tab in the Global Options.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Design

HeadingDescription
Boxed ModeChoose to display items in boxed mode. Default currently set to No.
Boxed Mode Border WidthSet the border width for toggle item. In pixels. Default currently set to 1. Reset to default.Using default value.
Boxed Mode Border ColorSet the border color for toggle item. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
Boxed Mode Background ColorSet the background color for toggle item. Leave empty for default value of Light Gray. Reset to default.Using default value.
Boxed Mode Background ColorSet the background color for toggle item. Leave empty for default value of White. Reset to default.Using default value.
Divider LineChoose to display a divider line between each item. Default currently set to Yes.
Divider Line ColorSet the color for divider line. Leave empty for default value of Strong Dark Gray. Reset to default.Using default value.
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. Default currently set to 13. Reset to default.Using default value.
Toggle Icon ColorSet the color of icon in toggle box. Leave empty for default value of White. Reset to default.Using default value.
Toggle Icon Boxed ModeChoose to display icon in boxed mode. Default currently set to Yes.
Toggle Icon Inactive Box ColorControls the color of the inactive toggle box. Leave empty for default value of Dark. Reset to default.Using default value.
Toggle Icon AlignmentControls the alignment of toggle icon. Default currently set to Left.
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. Leave empty for default value of Avada Green. Reset to default.Using default value.
Toggle Active Accent ColorControls the accent color on active for icon box and title. Leave empty for default value of Avada Green. Reset to default.Using default value.

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