Accordion
You can edit 8 Components for free. Get premium for unlimited access.
A vertically stacked set of interactive headings that each reveal a section of content.
Figma
The Collapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
2. Type
You can edit the type with the default or title parameter.
Image 2.1 : Type title
Image 2.2 : Type default
3. State
You can edit the state with the default, expand or disabled parameter.
Image 3.1 : State default
Image 3.2 : State expand
Image 3.3 : State disabled
SwiftUI
The DLCollapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
-
-
2. Type
You can edit the type with the .normal or .title parameter.
Title
Collapse
Collapse
Lorem ipsum dolor sit amet.
title: "Collapse"
)
DLCollapse(
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
DLCollapse(
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
3. State
You can edit the state with the .normal or .disabled parameter.
Collapse
Collapse
title: "Collapse",
description: "Lorem ipsum dolor sit amet.",
state: .normal
)
DLCollapse(
title: "Collapse",
state: .disabled
)
Jetpack Compose
The Collapse component is used to answer questions within an FAQ section.
1. Reference
This component inherits props from the Collapse.
-
-
2. Type
You can edit the type with the CollapseType.title or CollapseType.default parameter.
Title
Collapse
title = "Collapse",
type = CollapseType.title
)
Collapse(
title = "Collapse",
state = CollapseState.default
)
3. State
You can edit the state with the CollapseState.default, CollapseState.disabled or CollapseState.expand parameter.
Collapse
Collapse
Collapse
Lorem ipsum dolor sit amet.
title = "Collapse",
type = CollapseType.default
state = CollapseState.default
)
Collapse(
title = "Collapse",
type = CollapseType.default
state = CollapseState.disabled
)
Collapse(
title = "Collapse",
description = "Lorem ipsum dolor sit amet.",
state = CollapseState.expand
)
Preview
Preview
Code
Product information
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
Shipping Details
We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.
Return Policy
Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.
DLAccordion(
state: DLAccordionState.collapsed,
trigger: 'Product information',
content:
'Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.',
showSeparator: true,
);
DLAccordion(
state: DLAccordionState.collapsed,
trigger: 'Shipping Details',
content:
'We offer worldwide shipping through trusted courier partners. Standard delivery takes 3-5 business days, while express shipping ensures delivery within 1-2 business days.',
showSeparator: true,
);
DLAccordion(
state: DLAccordionState.collapsed,
trigger: 'Return Policy',
content:
'Our flagship product combines cutting-edge technology with sleek design. Built with premium materials, it offers unparalleled performance and reliability.',
showSeparator: true,
);Usage
Add this code example to your project to see how the component works.
DLAccordion(
state: DLAccordionState.collapsed,
trigger: 'Accordion',
content:
'Lorem ipsum dolor sit amet, consetetur sadipscing elitr.',
showSeparator: true,
);Discover more content
You have questions or need help?
You want to try?
Save time and money?