Accordion

The Accordion component in Joget displays information in a collapsible format, making it useful for toggling between hiding and showing large amounts of content. This is particularly beneficial for organizing content in a user-friendly and space-efficient manner.

How does it work?

Test the Accordion in the built-in Joget DX 8 Showcase app to see how it works.

1. Login as Admin and Click the Pencil icon on Joget DX 8 Showcase to open the App Composer.
   
2. Click the Joget DX 8 Showcase UI to create an environment for testing the Accordion.
   
3. Drag and drop the Rich Text UI element into the New In DX 8 category (or anywhere you like).
4. Name your Label and Menu ID with meaningful titles, and write a description in the Content of your Accordion demo menu.
   
5. Click Edit Page Components.
   
6. Drag and drop the Accordion page component into the page for editing.
   
7. Provide a meaningful Label for the Accordion.
   

Configure accordion

To configure the Accordion component properties, in UI Builder, drag and drop the Rich Text UI element into any category to enable the button Edit Page Components, click on it, and Drag and drop the Accordion page component into the page for editing.

When adding the Accordion component, you will see the following fields available for configuration:

• ID: Custom ID of the Accordion.
• Label: Label of the row in the Accordion to be shown in the UI.
• Custom ID: Custom ID of the row in the Accordion.
• Expanded By Default: When checked, the Accordion row will be expanded by default in the UI and can be collapsed and expanded with a click.
• Add Row: Adds a new row to the Accordion.

See the following examples of Accordion Rows:

• Accordion Example with Rich Text: You can include rich text content within an Accordion row, allowing for formatted text, images, and links.
  
• Accordion Example with Calendar: A calendar component can be embedded within an Accordion row, providing a compact and interactive display of dates and events.
  

AJAX & events

Events are fundamental to creating interactive and dynamic web pages, and AJAX enables the development of more responsive web applications without reloading the entire page. In the context of the Accordion component, AJAX & Events can be configured to enhance interactivity and user experience.