Accordion (single)
Toggle the display of a single section of expandable content
Demo
Here are some advanced options.
API
Tag
| Name | Description |
<s-accordion-single>
|
Custom tag, accepts a slot and a single div as content |
Slots
| Name | Required | Description |
|---|---|---|
title
|
|
Title text |
Attributes/Props
| Name | Value | Required | Description |
open |
Boolean |
When present, expands the accordion's content area. |
Events
| Name | Detail | Description |
s-toggle |
The accordion's oldState and newState are available on e.detail |
Fired when the accordion is toggled. |
Demo
API
Tag
| Name |
<SAccordionSingle>
|
Slots
| Name | Required | Description |
|---|---|---|
title
|
|
Title text |
Props
| Name | Value | Required | Description |
open |
Boolean |
When present, expands the accordion's content area. |
|
onS-toggle |
Function |
Handles the |
Skylab React links
Guidelines
Adjusting spacing
Use util padding/margin classes (as shown in the code sample) to increase spacing between the accordion trigger and the expanded content below.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com