Accordion Element

The Accordion Element will help you stack large pieces of content into a vertically stacked list of items. These items can be expanded or collapsed and display the content associated with that item. You could use this element to write frequently asked questions or multiple item presentation. 

The Toggle Element will play almost the same role as the Accordion, only there are two main features that set these two elements apart. 

1. When the page loads, the Accordion element will leave the first item open, while the other items remain closed. Meanwhile, the Toggle element will have all the items collapsed when a page is loaded. 
2. The Accordion element will only have one item opened at a time, once you open one item of the accordion the other will be closed automatically. Meanwhile, with the toggle element, you can open as many items as you wish at the same time. 

Content Tab

Accordion

Accordion Items

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

1. Title & Description - Inside the accordion element you will have the options to write the title and the description
2. Icon - Add an icon for the accordion 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 accordion 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

Accordion 

1. Border Width - Set the width of the accordion's border 
2. Border Color - Set the color for the accordion border

Title

1. Background - Set the background color for the accordion 
2. Color - Set the color for the accordion's title 
3. Active Color - Set the color for the title of the active accordion 
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 accordion 
2. Color - Set the color for the icon 
3. Active Color - Set the color for the icon of the active accordion
4. Spacing - Set the spacing between the icon and the title of the accordion

Content

1. Background - Set the background color for the content 
2. Color - Set the color for the accordion'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.