Toggles Element

13/03/2019

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

Toggles

Avada Toggles Element

Toggles are a great way to display and hide content that you want to give the user control over.

Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
Fugiat dapibus, tellus ac cursus commodo, mauris sit condim eser ntumsi nibh, uum a justo vitaes amet risus amets un. Posi sectetut amet fermntum orem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia nons.
View More Examples!

Overview

How To Use The Toggles Element

The Toggles Element is the most versatile way to add blog posts anywhere on your site.

Step 1 – Create a new page or edit an existing one.

Step 2 – Add a container then select your desired column layout.

Step 3 – Click the ‘+ Element’ button to bring up the Elements window. Locate the ‘Blog’ element and click it to bring up its options window.

Step 4 – Configure the Blog element to your liking. This is where the action happens. The Blog Element comes with 7 different blog layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this element, make sure you visit the Blog Element Demo page. There are way too many options to list for this element, but if you start with your preferred layout, and then slowly go down the options list, customizing its appearance to suit your wishes, you will soon get the blog page you are looking for! There is almost nothing that cannot be customized, and it is truly the most versatile way to add blogs to a page.

Step 5 – Once you have finished configuring the options, click ‘Save’ to insert the element into the page. Preview the page to view the Blog element output, and remember you can come back into the element to fine tune it.

Toggles Element Options

Parent Options

Toggles or Accordions – Illustrated as A. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

Boxed Mode – Illustrated as B. Choose to display items in boxed mode.

Boxed Mode Border Width – Illustrated as C.  Set the border width for toggle item. In pixels.

Boxed Mode Border Color – Illustrated as D. Set the border color for toggle item.

Boxed Mode Background Color – Illustrated as E. Set the background color for toggle item.

Boxed Mode Background Hover Color – Illustrated as F. Set the background hover color for toggle item. Leave empty for default value.

Divider Line – Illustrated as G. Choose to display a divider line between each item.

Title Size – Illustrated as H. Controls the size of the title. Enter value including any valid CSS unit, ex: 13px.

Toggle Icon Size – Illustrated as I. Set the size of the icon. In pixels (px), ex: 13px.

Toggle Icon Color – Illustrated as J. Set the color of icon in toggle box. Leave empty for default value.

Toggle Icon Boxed Mode – Illustrated as K. Choose to display icon in boxed mode.

Toggle Icon Inactive Box Color – Illustrated as L. Controls the color of the inactive toggle box.

Toggle Icon Alignment – Illustrated as M. Controls the alignment of toggle icon.

Toggle Hover Accent Color – Illustrated as N. Controls the accent color on hover for icon box and title.

Element Visibility – Illustrated as O. Allows you to control the element’s visibility. Choose one or more between Small Screen, Medium Screen, or Large Screen.

CSS Class – Illustrated as P. Add a custom class to the wrapping HTML element for further css customization. Learn more here.

CSS ID – Illustrated as Q. Add a custom id to the wrapping HTML element for further css customization. Learn more here.

Adding/Editing Settings

Add / Edit Items – Illustrated as R. This is where all your child element’s items are found. Each will be numbered to better keep track of how many you currently have. You can reorder elements by dragging them and dropping them into place.

Edit Item Icon – Illustrated as S. Allows you to edit an item.

Clone Item Icon – Illustrated as T. Allows you to clone an item. Cloned items will automatically be added to the bottom of the items list.

Delete Item Icon – Illustrated as U. Allows you to delete an item.

Re-order Feature – Illustrated as V. Allows you to drag and drop the item to your desired order to rearrange them.

Add New Toggle Button – Illustrated as W. Allows you to add a new Toggle.

Toggles Element Parent Child Options

Individual Child Options

Title – Illustrated as A. Insert the toggle title.

Open by Default – Illustrated as B. Choose to have the toggle open when page loads.

Toggle Content – Illustrated as C. Insert the toggle content.

Toggles Element Child Options

Global Options

As well as the Element Options, there are also some global options that can be set for the Toggles Element in the Theme Options  (Avada > Theme Options > Fusion Builder Elements > Toggles Element).

Toggles or Accordions – Illustrated as A. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.

Toggle Boxed Mode – Illustrated as B. Turn on to display items in boxed mode. Toggle divider line must be disabled for this option to work.

Toggle Boxed Mode Border Width – Illustrated as C.  Controls the border size of the toggle item. In pixels. This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Boxed Mode Border Color – Illustrated as D. Controls the border color of the toggle item. This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Boxed Mode Background Color – Illustrated as E. Controls the background color of the toggle item. This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Boxed Mode Background Hover Color – Illustrated as F. Controls the background hover color of the toggle item.This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Divider Line – Illustrated as G. Turn on to display a divider line between each item. This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Title Font Size – Illustrated as H. Controls the size of the title text. Enter value including any valid CSS unit, ex: 13px.

Toggle Icon Size – Illustrated as I. Set the size of the icon. In pixels (px), ex: 13px.

Toggle Icon Color – Illustrated as J. Set the color of icon in toggle box.

Toggle Icon Boxed Mode – Illustrated as K. Choose to display icon in boxed mode.

Toggle Icon Inactive Box Color – Illustrated as L. Controls the color of the inactive toggle box. This is a dependent option that always stays visible because other Builder Options can utilize it.

Toggle Icon Alignment – Illustrated as M. Controls the alignment of toggle icon.

Toggle Hover Accent Color – Illustrated as N. Controls the accent color on hover for icon box and title.

Toggles Element Global Options

Raw Element Parameters

Copy to Clipboard

Raw Parent Options

  • type – Choose from default, toggles, or accordions. Toggles allow several items to be open at a time. Accordions only allow one item to be open at a time.
  • boxed_mode – Choose from default, yes, or no. Provides the options to have a boxed layout for your Toggles.
  • border_size – Provides the option to set a pixel size for the border width.
  • border_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
  • background_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
  • hover_color – Accepts a hexcode ( #000000 ). Sets the separator’s color.
  • divider_line – Choose from default, yes, or no. Choose to display a divider line between each item.
  • title_font_size – Accepts any valid CSS unit. For example, 13px. Sets the size of the title.

  • icon_size – Accepts a numerical value. For example, 5. Sets the icon’s size.
  • icon_color – Accepts a hexcode ( #000000 ) or RGBA ( rgba(0,0,0,0) ). Sets the icon’s color in toggle box.
  • icon_boxed_mode – Choose from default, yes, or no. Sets to display icon in boxed mode.
  • icon_box_color – Accepts a hexcode ( #000000 ). Sets the color of the inactive toggle box.
  • icon_alignment – Choose from default, left, or right. Sets the toggle icon’s alignment.
  • toggle_hover_accent_color – Accepts a hexcode ( #000000 ). Sets the accent color on hover for icon box and title.
  • hide_on_mobile – Choose from small-visibility, medium-visibility or large-visibility. You can select more than one setting. This will show the element on the selected visibility options, and will hide them on the deselected ones.
  • class – Add a custom class to the wrapping HTML element for further CSS customization.
  • id – Add a custom id to the wrapping HTML element for further CSS customization.

Raw Child Options

  • title – The custom title text of the toggle item.
  • open – Choose from yes, or no. Sets if the toggle item is open or close by default.
  • custom content – Insert toggle’s content between the [ fusion_accordion ][/ fusion_accordion ] tags.