Welcome to the StepOne components documentation
StepOne Fundation
StepOne Modules
Accordion
The Accordion is a styled component that shows and hides its contents.
Accordion Props
| Name | Use | Type | Definition |
| filled | optional | boolean | Add shadow box to accordion. |
| id | optional | string | Identifies the accordion item. |
| defaultShow | optional | boolean | Indicates if the accordion show the content. |
| className | optional | string | Add class to accordion. |
Examples
Simple Accordion example
Example of a simple Accordion with no props passed.
Filled Accordion Example
Example of an Accordion with filled props passed.
Helper Text Accordion
This variant can be used by implementing Accordion with child AccordionHeader with a child text tag with class .accordion-helper-text
Others Accordion
We have infinite variants to Accordion component. His two child components can receive any elements of HTML, this gives us enough flexibility to be able to lay out as the application requires.
Group Accordion
If is necesarry group different accordions we have a style for this variant. This variant can be used by implementing div HTML tag with class .accordion-group and in this container add different Accordion components as a childs.
Opened Accordion
Is possible to configure Accordion component with state open to default. We can impleting with defaultShow attribute.
Lorem ipsum, dolor sit amet consectetur adipisicing elit...