Accordion Module

The Accordion Module allows you to add and hide specific content in a list, which can collapse and expand as the user clicks on the different list elements.It is possible to find the Accordion Module in the Basic Modules menu, add it to your website by dragging it from the top bar to a row or column of your preference.


EDIT THE ACCORDION MODULE

To open the editing menu, double-click on top of the module you wish to modify or hover the mouse on top of it to find the blue Module menu and click on the Edit option.


1. Content

By default, when dragging in a new Accordion Module, one list element will already be created. Click on top of it to reveal a dropdown menu with multiple content options.


1.1. Title

In this section you should add the title for the list element. This will be the only text visible when the element is collapsed.


1.2. Item Icon

If you want to add a unique item icon per list element, select it in this section. Simply choose the icon from the list or type specific keywords to reveal relevant icons.


1.3. Text

In this section you can add text to your list element that will only be revealed when the element is expanded. It is possible to locally attribute a Styling (from your Text Global Styling); bold, italic and underline options; links; global data nodes; and lists.


1.4. Add File

This section allows you to add an image to your list element. Add file from the File Manager or from your computer. You will also be able to define its Alternative Text here.


1.5. Button

If you wish to add a button to your list element, simply specific the button label in this section and the button will automatically be added to the module. You can define whether it should link to an external link, a page, an email or a file. You can also define whether it should open in a new tab and if you want to add a "nofollow" property. Finally, it is also possible to add a unique icon to the button.


1.6. Add Element

To add a whole new list element, simply click on the Add Element option both on top and the bottom of your existing list elements.


1.7. CHANGE ORDER & DELETE ELEMENT

To change the icons order simply click on the three vertical dots on the left side of each item and drag it to your preferred position. To delete an item of a list, simply click on the trash icon on the right side.


1.8. List Icon

If you want to define an overall icon to all your list elements, do it in this section. Simply choose the icon from the list or type specific keywords to reveal relevant icons.


2. Styling


2.1. Title

In this section you can style the title in terms of font color, size, family, weight, line height, letterspacing, text decoration, italic and uppercase options, as well as alignment within the list element.


2.2. Image

In this section you can define the image size in percentage of the original size, float options and spacing, both in terms of margin and padding.


2.3. Button

In this section you can define the button placement, a fixed width, a background and font color (in normal and hover state), the font size, family, weight, line height, uppercase and alignment options. Moreover, you can also style the border's color, width, style and radius. Finally, you can customize the spacing, in terms of margin and padding, and the icon size and color, if you have included one.


2.4. Icon Style

In this section you can define the overall icon style, including setting a width, height and icon size, the icon and background color (in normal and hover state), as well as margin to the left and to the right of the icon.


2.5. List Element

The list element styling covers the area visible when the element is collapsed. It includes background color (in all states), border color, width, style and radius, as well as spacing in terms of margin and padding.


2.6. Expanded Area

The expanded area covers the area visible when the element is expanded. It includes background color, border color, width, style and radius, as well as spacing in terms of margin and padding.


2.7. Spacing

The last option allows you to define both the margin and padding of the Accordion Module.


3. SETTINGS

In Settings you have the option to choose whether you by default want one of your list elements expanded or not. Toggle "allow collapsing/expanding of all items" if you want your list to be collapsed as illustrated below.

4. ACCORDION GLOBAL STYLING

Instead of individually styling each Accordion Module, it is possible to do it automatically with Global Styling. Under the Global Styling tab, there is a Module Design option on the left menu. Click on it to expand the options and you should find the Accordion menu. Click here to read all about Accordion Global Styling!

 

Anything we’ve not covered?

Contact Us