Accordion Widget

Last modified on 2022/05/28 10:52

Apps - Widget - Accordion icon.png This type of widget belongs to the Basic category in the widget library. It enables you to create an accordion menu containing a list of sections displayed one below the other. These sections can contain text or images, point to a HTML page, or call a page from the app or from another app. This is used to display a maximum amount of information in the least number of pages.


  Open url.png See General information on widgets.

Best Practice big icon.pngBest practice

  • You use the Accordion widget to group a small amount of information in sections. If you want to group information in horizontal or vertical tabs, you should use the Tab widget.
  • Define the height of the widget so that all of the sections are displayed (Theme > Widget Height).


        EVApps - widget Accordion - Example.png

List of properties


Accordions: List of sections, each with a title and content. Click [ ADD ITEM ] to add a new section. Open url.png See the procedure.


    Open url.png See the description of properties

Graphical representation Configurable element Properties to be filled in
Graphic Properties - General elements.png (1) Widget General properties > Element = Widget
  • Text Color: text color of the widget
  • Background Color: background color of the widget
(2) Section active General properties > Element = Selection (Active)
  • Text Color: title color of the active section
  • Background Color: background color of the active section
(3)Inactives sections General properties > Element = Selection (Secondary)
  • Text Color: title color of the inactive sections
  • Background Color: background color of the inactive sections


How to create an accordion menu with sections

1. Click [ ADD ITEM ]. In the Accordions field, enter the title of the first section of the accordion menu and specify its content. You can enter the code directly in the field or click Apps - Edit icon.png to open the text editor.

2. Repeat this procedure for the other sections in the order in which you want to display them.

  • To change the order in the Accordions list, click and drag the section you want to its new position using Apps - Order objects icon.png.
  • To delete a section, click Apps - Delete icon.png.

3. Switch to execute mode EVApps - GUI - Execute icon.png to view the accordion menu as it will appear to users.

How to retrieve the launch URL of an app

1. In the App Gallery, click Apps - Application properties icon.png next to the app you want to run.

2. In the graphic editor, click EVApps - GUI - Share icon.png in the toolbar.

            EVApps - GUI - Share Apps.png

3. Copy the app launch URL.

4. Return on your app and paste the URL:

  • either in the URL property of a hyperlink inserted on a Label, Header/Footer or HTML Code properties of a widget (via Apps - Text Editor - Hyperlink icon.png in the text editor);
  • or in the URL to Load property of the Button widget ;
  • or in the Data > Select Link Type property of the Menu widget.

Powered by XWiki © EasyVista 2022