(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.


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.


You can make visual adjustments such as environmental interior spaces and sizing. Depending on the collapse size, you can align the elements in it.


You can adjust the Collapse text and the properties such as color and size of the icon with the text section.


You can add color or image to the Collapse body.


You can add lines to the outer edges of the Collapse and give curves to the corner.


You can add collapse shadows.

Simplicity Meets High Performance

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