(function openLouie() { let louie = document.getElementById("Dropdown-Toggle-14"); louie.classList = "host-toggle w-dropdown-toggle w--open"; console.log(louie); })();

It is the element that allows content with horizontal blocks to be displayed in a collapsible and expandable area. Sections with mostly titles displayed, when Expanded, other content contained in them is displayed. It is mostly used in areas such as multiple description topics or frequently asked questions.

Adding Collapse

Drag and drop the Collapse element to the screen from the Elements panel. Clicking on one of the titles opens the detail panel. You can add an element directly here, or you can create more complex sections by adding a Row. Collapse element must be added to a container element like other elements. Although we generally design the screen by adding it to the Row, they can also be added to other container type elements. You can also drag and drop elements other than Header and Footer elements into the Collapse panel.


You can add text and icons inside the Collapse element. You can give role-based authorizations to the element as well as set its visibility with show/hide/conditional options.


Open the Collapse section of the Properties panel. From here, you can add, delete, or reorder new collapse panels, and select existing collapse panels.


Keep open whichever panel is open in Collapse and close other panels.


When one of the panels in Collapse is opened, you can collapse the others open.


You can selectively manage the panels you add in Collapse. When you select one of the panels, you can change the Header, Key and Show Arrow properties. You can also make styling settings on the selected CollapsePanel.


You can use the authorization options for the panel element.


You can manage the visibility of the element. It is always visible, hidden, or you can make it appear or hide depending on a condition.


You can further edit the Collapse element by adding a frame, fill color, border, or shadow.


In the alignment commands given for rows or columns that are parent elements, the child elements under them are affected. You can visit the Layout page to adjust the visual arrangements such as environmental interior spaces and sizing.


You can adjust the text of the element and the properties such as color and size of the icon with the text section. You can visit the Text page for detailed information.


For detailed information on filling their bodies with color or adding a background image, you can visit the Fill page.


Visit the Border page to add lines to the outer edges and bevel the corners.


The shadow effect is only displayed in web apps. You can visit the Shadow page to add a shadow effect to the row and its columns.

Simplicity Meets High Performance

Free edition subscription
Keep your work
No credit card required to try