Accordion Toggle

Content #

General

Accordion items: By clicking on Add item button, you can add any number of accordion items.

1. Title: Enter the accordion item’s title here
2. Content: Enter the accordion item’s content
3. Add item: To add more accordion items to the list, click the add item button
4. Type

• Accordion: You can extend one Collapsed item at a time in the accordion-type
• Toggle: This style allows you to expand all of the collapsed items

5. Layout

• Style 1: In this style the Accordion toggle widget allows you to show collapsed text boxes where you can see items and content. This allows you to present the content in a compact format, allowing visitors to easily scan through the titles without having to scroll through the lengthy list.

• Style 2: This style is similar to style 1, but it is more minimalist, clean, and contemporary.

6 Icon – Choose an icon from option upload SVG, icon library, or none if you don’t want anything displayed

7 Active Icon – Choose an Active icon from option upload SVG, icon library, or none if you don’t want anything displayed

Style #

General

1. Border Width: Set the border width between each Accordion items
2. Border Color:  Choose a color for the border
3. Hover Background Color: Change the content box’s hover color.
4. Active Background Color: Choose a color for the content box’s active background

Title

1. Background Color: Choose a color for the title box’s background
2. Color: Choose the color for the title
3. Active Color: Change the title active color
4. Typography: Set the typography of the title, which includes (Font Family, Size, Weight, Transform, Style, Decoration, and Line-Height).
5. Padding: Set the space around the title box

Icon

1. Alignment: Set the icon alignment at the start or end of the content along with the title
2. Color: Set the icon color
3. Active Color: Set the icon active color
4. Spacing: Set the spacing between the title

Content

Depending on the layout you choose, the following options may appear:

Style 1

1. Color: Set the content color
2. Typography: Set the typography of the title, which includes (Font Family, Size, Weight, Transform, Style, Decoration, and Line-Height)
3. Padding: Set the space around the content box

Style 2

1. Color: Set the content color
2. Typography: Set the typography of the title, which includes (Font Family, Size, Weight, Transform, Style, Decoration, and Line-Height)
3. Border Width: Set the border on the left side of each content as indicated in figure 2
4. Border Color: Set the border-color
5. Inner Spacing: Set the space around the content
6. Outer Spacing: Set the outer space between content and the title