1. Home
  2. Docs
  3. Content Elements
  4. Accordion

Accordion SA Element

The accordion is one of the great ways to display multiple strings of content in a smart manner. It increases the readability where there is a very tiny space for any kind of important content. Here in this tutorial, you’re going to learn how to use the Accordion element into Elementor Page Builder. So let’s get straight into it:

 


If you don’t know how to activate elements and start using it, then check the tutorials below:

Ξ Activate/De-activate Elements

Ξ Using Elementor Addons in Elementor


 

How to Customize the Accordion Element

»Content

 

General Settings

⇒Accordion Type: Set the type of content you want either Accordion or Toggle.

⇒Enable Toggle Icon: Enable the Toggle Icon if you want to add an icon to the toggle.

⇒Icon: Select the icon to represent the action of expanding an item in toggle. You can choose from the icon library or upload an SVG as an icon.

⇒Active Icon: Select the icon to represent the action of collapsing the active item in toggle.

⇒Toggle Speed: Set the toggle speed based on millisecond (ms)

 

Content Settings

⇒Active As Default: Choose which tab remains open when the page first load and set that particular item to be activated as default on the accordion.

⇒Enable Tab Icon: Enable the Tab Icon if you want to add an icon to the tab.

⇒Icon: Select the icon for the tab. You can choose from the icon library or upload an SVG as a tab icon.

⇒Tab Title: Enter the title for each item

⇒Content-Type: Set the content type either as content or from the saved template.

⇒Tab Content: Enter the description for each item

⇒Add Item: Use the ‘+Add Item’ button to add more accordion items to the list.


»Style

 

General Style

⇒Padding: Set the padding value for the top, right, bottom and left around the accordion for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the accordion for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Tab Style

⇒Typography: Set the typography options for the tab.

⇒Icon Size: Set the icon size for different dimensions.

⇒Icon Gap: Set the icon gap for different dimensions.

⇒Padding: Set the padding value for the top, right, bottom and left around the tab for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the tab for different dimensions. You can link the values together or customize them individually.

⇒Tab Background Color: Customize the tab background color for Normal, Hover & Active view.

⇒Text Color: Customize the text color for Normal, Hover & Active view.

⇒Border Type: Select a border type from the list according to your preference.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the tab for different dimensions.

 

Content Style

⇒Background Color: Add a custom color to the accordion content background.

⇒Text Color: Add a custom color to the text of the accordion content.

⇒Typography: Set the typography options for the content.

⇒Padding: Set the padding value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Margin: Set the margin value for the top, right, bottom and left around the content for different dimensions. You can link the values together or customize them individually.

⇒Border Type: Select a border type from the list according to your preference.

⇒Border Radius: Set the border radius for the top, right, bottom and left around the content for different dimensions.

⇒Box Shadow: Customize the box-shadow color, set the horizontal and vertical value of the shadow, control the blur radius and spreading, and set the position either outline or inset.

 

Toggle Caret Style

⇒Icon Size: Set the toggle icon size for different dimensions.

⇒Caret Color: Add a custom color to the toggle icon in the normal mode.

⇒Caret Color (Active): Add a custom color to the active toggle icon.


»Advanced

Set the Advanced options that are applicable to this widget

Still can’t figure out? Don’t worry, we got your back! Just watch the video tutorial below to have a precise understanding of Accordion Element.


Was this article helpful to you? Yes No

How can we help?