Toggle Element

The Toggle Element will allow you to add diverse content with multiple sections,and offer the options to show or hide the content at any time. The Accordion Element will play the same role, only between the two elements there are a few characteristics that sets the two apart. 

  1. The Toggle Element will have all the items collapsed when the pages loads, while the Accordion element will have the first item expanded while the other items remain closed. 
  2. The Toggle Element will allow you to expand as many items as you need, while the Accordion Element will have only one item expanded at a time, having other items being collapsed automatically. 

Content Tab

Toggle

You can add as many items as you wish to the toggle element, simply click on the [+ add item] icon, and if you wish to duplicate or delete a toggle element simply navigate with the icon next to the item. 

  1. Title&Description - Enter the title and the description for the toggle item. 
  2. Icon - Add an icon for the toggle items that will represent the expansion of an item. Choose either None, Upload SVG, or Icon Library
  3. Active Icon - Add an icon for the toggle items that represent the collapse of an active item. Choose either None, Upload SVG, or Icon Library
  4. Title HTML tag - Set the HTML tag for the title 

Style Tab

Toggle 

  1. Border Width - Set the width of the toggle's border 
  2. Border Color - Set the color for the border of the toggle
  3. Space Between - Set the space between the toggle items and the border 
  4. Box Shadow - Add shadow to the toggle

Title

  1. Background - Set the background color for the toggle
  2. Color - Set the color for the title of the toggle items 
  3. Active Color - Set the color for the title of the active toggle
  4. Typography - Tweak the typography options for the title
  5. Padding - Add the padding values for the title 

Icon

  1. Alignment - Position the icon either at the beginning or at the end of the toggle 
  2. Color - Set the color for the icon 
  3. Active Color - Set the color for the icon of the active toggle item
  4. Spacing - Set the spacing between the icon and the title of the toggle 

Content

  1. Background - Set the background color for the content 
  2. Color - Set the color for the toggle's content text 
  3. Typography - Tweak the typography options for the content
  4. Padding - Add the padding values for the content 

 Set the settings for the Advanced Tab that is appropriate for the element.  

Did this answer your question? Thanks for the feedback There was a problem submitting your feedback. Please try again later.