1. Home
  2. Docs
  3. Happy Elementor Addons P...
  4. Premium Widgets
  5. Advance Accordion

Advance Accordion

How to Use the Advanced Accordion Widget of Happy Elementor Addons

With the new Advance Accordion Widget of Happy Elementor Addons, showcase your webpage with more class and elegance.

Using Advance Accordion

Step 1:

Select the Advance Accordion widget from the menu bar on the left-hand side of the screen then drag and drop it in the selected area.

ss1

Step 2:

In the ‘Content‘ section, you will find options to edit ‘Accordion‘, ‘Options‘.

ss2

In Accordion,  you can add an item to your accordion with the ‘ADD ITEM’ button. Add your content to the accordions. You can delete an item using the ‘X‘ button. You can upload an icon or an SVG to stylize your accordions more.

ss3

In ‘Options’, you can set the icons or SVG for when you open the accordion and close the accordion.

ss4

Step 3:

In the ‘Style‘ section, you will have options to design ‘ Item,’ Title’, ‘ Title Icon’, ‘Content’ , and ‘Open/Close Icon.

ss5

In ‘Item‘, you can set the vertical spacing between the items, add a border, set border-radius. You can add a box-shadow as well.

ss6

In ‘Title‘, you can add padding, stylize your title with typography, add text color, you have many options to position your title. You have two background types Gradient and Classic. Style as you see fit.

ss7

Here are the Typography options to design your title font.

ss8

In ‘Title Icon‘, you can set the spacing between the icons.

ss9

In ‘Content‘, you can design your content. You can add padding, border, border-radius, design your content with Typography as well. You can also add an image and place it as you like.

ss10

Set the space between open and close icons in ‘Open/Close Icon’.

ss11

Step 4:

If you want to add motion effects, Happy Effectsbackground or make it responsive and more intriguing, click on ‘Advanced‘ to explore those options. the ‘Advanced‘ is a default feature of Elementor. Give a read to this Document to know more about Advanced features and its uses.

ss12

Finally, after clicking the publish button you will see the beautiful Accordion on your webpage.

ss13

That’s it!

How can we help?