/

Documentation

/

Collapse

Collapse

The Collapse component provides a smooth, interactive way to show and hide content sections. Designed for clarity and space-saving, it helps organize information efficiently—allowing users to expand details only when needed without overwhelming the layout.

Chevron Icon

Component

The Chevron Collapse component features a clear title, descriptive text, and a chevron icon that indicates expand or collapse states. This interactive design helps users navigate content easily by revealing or hiding details with smooth, intuitive animations.

Example

The state icon depends on the variant you select.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

This is the title

Use the content area to insert the text or the answer inside the collapse component

Plus Icon

Component

The Plus Collapse component features a clear title, descriptive text, and a plus icon that indicates expand or collapse states. This interactive design helps users navigate content easily by revealing or hiding details with smooth, intuitive animations.

Example

The state icon depends on the variant you select.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

This is the title

Use the content area to insert the text or the answer inside the collapse component

Dot Icon

Component

The Dot Collapse component features a clear title, descriptive text, and a doticon that indicates expand or collapse states. This interactive design helps users navigate content easily by revealing or hiding details with smooth, intuitive animations.

Example

The state icon depends on the variant you select.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

This is the title

Use the content area to insert the text or the answer inside the collapse component

Summary

The Collapse component offers an interactive way to toggle content visibility with a clear title, descriptive text, and a chevron icon indicating open or closed states. It enhances user experience by organizing information efficiently and keeping layouts clean and manageable.

Create a free website with Framer, the website builder loved by startups, designers and agencies.