How to configure and style Accordion Widget.
Create an interactive drawer on your website that expands when you click on it, using Exclusive Addons Accrodion Widget for Elementor.
STEP 1:
Select the ‘Accordion’ widget from Elementor panel. Then drag and drop it in the selected area.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-1.png)
STEP 2:
In Content section, you will find options to edit ‘Contents’.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-2.png)
2.1. You can Add Item by clicking add item button. And delete item by clicking the cross button.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-3.png)
2.2. Each accordion item has three options ‘Content’, ‘Image’ and ‘Style’.
In Content Option you can set this item is defultly active or not, Enable title icon, set a Icon, Accordion Title, and content. You can also enable button.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-4.png)
You can choose an image for content.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-5.png)
In Style option you can set full container Background Color. Set Title Color, Background Color, Hover Color and Hover Background Color. You can also set Content Border.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-6.png)
You can also Enable or Disable inactive/active icon. Also set that icon.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-7.png)
All other items have same options.
STEP 3:
In Style section, you will find options to edit ‘Container’, ‘Title’, ‘Title Icon’, ‘Inactive/Active Icon’, ‘Content’, ‘Image’, ‘Button’.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-8.png)
3.1. Container section consists of ‘Background Color’, ‘Padding’, ‘Margin’, ‘Border’ and ‘Box Shadow’.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-9.png)
3.2. In Title section you can set ‘Typography’, ‘Padding’, ‘margin’ and some more options. You can also set Text Color and background for Normal, Hover and Active status.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-10.png)
3.3. Title Icon Consist of ‘Width’, ‘Margin’, ‘Padding’, ‘Border’ and some more options. You can also set Color and Background Color for both Normal and Active status.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-11.png)
3.4. Active/Inactive Icon consist of Icon Size, Width, Border and some more options.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-12.png)
3.5. In Content section, you can set Typography, Background Color, Text Color, Border, Border Radius and some more options.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-13.png)
3.6. In Image section, you can set Image Position, Image Size, Padding and Margin.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-14.png)
3.7. Button section consists of Typography, Padding, Margin, Text Color, Background Color for both normal and hover states.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-15.png)
STEP 4:
Finally, after clicking the update button you will see the beautiful Accordion on your webpage.
![](https://exclusiveaddons.com/wp-content/uploads/2019/11/accordion-16.png)