Accordion (fw-accordion)
fw-accordion displays a collapsible accordion component, which expands/collapses on clicking the accordion header.
Demo
Default Accordion
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Show Code
Accordion Title icon size
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Show Code
Accordion with custom toggle icons
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Show Code
Toggle icons can be customized using named slots.
| Icon | Slot Name |
|---|
| Expanded Icon | expanded-icon |
| Collapsed Icon | collapsed-icon |
No Bounding Box Accordion (Borders at top and bottom only)
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Show Code
Accordion with custom CSS properties
Header Text
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to
make a type specimen book. It has survived not only five centuries, but also
the leap into electronic typesetting, remaining essentially unchanged. It
was popularised in the 1960s with the release of Letraset sheets containing
Lorem Ipsum passages, and more recently with desktop publishing software
like Aldus PageMaker including versions of Lorem Ipsum
Show Code
Usage
Properties
| Property | Attribute | Description | Type | Default |
|---|
expanded | expanded | To manage accordion expanded or collapsed state | boolean | false |
type | type | The type of accordion to be displayed. default => Accordion with all borders no_bounding_box => Accordion with top and bottom borders only | "default" \| "no_bounding_box" | 'default' |
Events
| Event | Description | Type |
|---|
fwAccordionToggle | Triggered when the accordion is expanded or collapsed | CustomEvent<AccordionToggleEvent> |
Methods
toggle() => Promise<boolean>
Method available from the component to toggle expanded or collapsed state of accordion
Returns
Type: Promise<boolean>
promise that resolves to true
CSS Custom Properties
| Name | Description |
|---|
--fw-accordion-border | Accordion border |
--fw-accordion-border-radius | Accordion border radius |
--fw-accordion-box-shadow | Accordion box shadow |
Built with ❤ at Freshworks