How to create an accordion element

How to create an accordion element

To create an accordion menu on your Reactive website, you can use the Accordion element. This element allows you to create a menu that expands and collapses when clicked, providing a clean and organized way to present your content. 

Here’s how to create an accordion menu:

  • Visit the admin panel and click the Pages section under Website.
  • Select the page on which you want to add the accordion.
  • From the Content tab select the container and column you would like to place it.  
  • Click on the ''Add element'' button and then select the “Accordion” option.

Accordion settings

Text color. This setting allows you to customize the color of your text. 


Background color. This setting allows you to customize the background color of your element. 

Border color. This setting allows you to set the color of your element's border. 

Hover color. This setting allows you to control the color of your element on mouse over. 

Hover background color. This setting allows you to define a background color of your element on mouse over 

Hover border color. This setting allows you to define a border color of your element's border on mouse over. 

Note: To set the colors for tab elements, choose the color you need in the color chooser tool, or enter an existing color code into the special field below the palette. Adjust color opacity using the opacity scale (optional)


Margin 
. This setting allows you to control the space around the element's border by changing the top, bottom, left and right values. 

Padding. This setting allows you to control the space between the content and borders of the element by changing the top, bottom, left and right values. 

How to create a new accordion element

Click on the Add button at the top left of your screen. You can drag and drop accordion items to change their position. 

After adding the accordion, name it to match your planned content. Then, add the content you want to display on the accordion. 

To edit the content of a section, simply click on it and then enter your text in the editor. You can also adjust the style and layout of the section using the options in the editor menu.

When you’re happy with the content and style of your accordion menu, click on the "Apply" button to make it live on your website.
    • Related Articles

    • How to create a Google Map element

      The Google Map element allows you to add customized maps anywhere on your site. To create a new Google Map element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You ...
    • How to create a Code Block element

      The code block element is very useful. This allows you to embed the custom code that you want onto your page. To create a code block element, navigate to the Pages section from your Reactive admin under Website. Create a new page or edit an existing ...
    • How to create a text element

      The text element allows you to add text content right into your page. To create a text element, navigate to the Pages section from the sidebar menu of your admin panel under Website. Create a new page or edit an existing one. You can refer to our ...
    • How to create a product element

      Reactive allows you to add products into your content. You have full control over which products display, and how they are presented. To create a product element, navigate to the Pages section from the sidebar menu of your admin panel under Website. ...
    • How to create a skill bar element

      Skill bars are great for showcasing progressive stats like skills, in colorful visual bars. Here’s how to create skill bars: Visit the admin panel and click the Pages section under Website. Select the page on which you want to add the Skill bar. From ...