Accordion

This section will help you to build your tabs in Accordion style with smooth animation. It’s considered one of the best elements to optimize your page’s content with just a few simple steps.

To configure Accordion, please go to Elements > Basic > Drag the Elementor named Accordion to the position that you want.

This is one of the Basic Elements, you can’t find it in others such as Product, Collection, etc.

To adjust the content of Accordion, please click on the Accordion button on the top of the Element.

1. Content

1.1. General

• Icon: Choose the Icon for the tab title in a non-active mode.
• Icon Active: Choose the Icon of the accordion title in active mode.
• Icon Position: A flexible option that allows you to choose where to put the Icon of the accordion title (to the left or right).
• HTML Tag: Set type for each accordion item (H1, H2, H3…)

2.2. Item

• This is the place where you can add Titles for Accordion, you also can change HTML tags for them. Moreover, you are allowed to Move, Delete, Clone, and Add these items freely. There is a button called Preset at the end, you can click there to paste available accordions, or even only their styles.
• How to configure the content inside? One of the outstanding functions is EComposer allows us to add any reasonable Elements for the content insight. The reasonable Elements mean Basic/ Shopify/ the elements for the page. For example, you can’t add the Collection’s elements to the product page. This is the function that themes can not do.

2. Design

2.1. Heading

• Alignment: Set the position of each accordion title (available for desktop, tablet, and mobile devices).
• Background, Border, Spacing: You can freely change these options for the Heading for Normal, Hover, and Active mode.

2.2. Title

• Typography: Customize the typo option for you to make.
• Text Shadow: Adjust the shadow effect for your text.
• Text Color: Choose a color for your text.

2.3. Icon

• Size: You can change the size of icons (available for desktop, tablet, and mobile devices).
• Rotate: Set rotation value for icons (available for desktop, tablet, and mobile devices).
• You are also allowed to change Color, Background, Border, and Border Shadow for all Normal, Hover, and Active states.

2.4. Content

• Background: Set background color for tab’s content area.
• Box Shadow: Set box-shadow value for the content.
• Border: You can customize the border style, width, and color for the tab’s content area.
• Border Radius: Define how round the corners of the tab’s content area are (available for desktop, tablet, and mobile devices).
• Spacing: Set margin or padding value tab’s content (available for desktop, tablet, and mobile devices).