Overview

Expand all and collapse all buttons are user interface controls used with accordions or collapsible sections. The expand all button reveals all hidden content at once, while the collapse all button hides all content with a single click. These buttons provide a convenient way to quickly show or hide multiple sections simultaneously, improving navigation and content management.

Documentation

Description

The expand all and collapse all buttons are important parts of the user interface that work together with accordions to control the visibility of content. The expand all button allows you to open all sections at once, showing their contents. On the other hand, the collapse all button lets you close all sections, hiding their contents with just one click. These buttons are usually placed near the accordion for easy access.

To give users more control and customization options, there is a dropdown menu added. You can choose how the buttons are labeled, either with icons, text, or both. If you choose "Icons," you will see symbols that represent expanding and collapsing actions. If you select "Text," clear labels like "Expand All" and "Collapse All" will be displayed. The "Both" option combines icons and text labels.

This feature is designed to improve your experience by allowing you to personalize the labels on the buttons according to your preferences. You can choose visually appealing icons, clear text labels, or a combination of both, depending on what works best for you.

In summary, the expand all and collapse all buttons, along with the dropdown menu for label customization, make it easy for you to control the content in accordions. You have the flexibility to choose between icons, text, or a combination of both, ensuring that the buttons suit your needs and provide a user-friendly interface.

Typical usage scenario

A typical scenario for using expand all and collapse all accordions is in a web-based application or a document with a hierarchical structure, such as a FAQ page, a user manual, or a lengthy article with multiple sections.

Let's consider a FAQ page as an example. The FAQ page consists of several questions and answers, organized into sections or categories. Each question is initially displayed as a header, and when clicked, it expands to reveal the corresponding answer. The expand all and collapse all accordions allow users to control the visibility of all questions and answers simultaneously.

Here's how it typically works:

1. Initially, all sections are collapsed, and only the question headers are visible.

2. Users have the option to expand all sections at once by clicking on the "Expand All" button or a similar UI element.

3. When the "Expand All" button is clicked, all question headers expand, revealing their respective answers.

4. Users can then read through all the questions and answers without having to click on each individual question.

5. To collapse all sections and hide the answers, users can click on the "Collapse All" button or a similar UI element.

6. When the "Collapse All" button is clicked, all question headers collapse, hiding the answers and returning the page to its initial state.

This expands all and collapse all functionality provides convenience and saves time for users who want to quickly skim through the content or review all the information at once. It also helps to improve the overall user experience by giving users more control over the visibility of the content based on their preferences.

Dependencies

• Requires Mendix 9.0.5 or higher.

Features and limitations

Features:

• Expand All Accordions at the same time with Single click.
• Collapse All Accordions at the same time with single click.

Frequently Asked Questions

• Ask your question at the Mendix Community Forum.