## Expansion Panel

A simple panel that collapses and expands to neatly organize and show or hide information in your interface.
Demo

Component | Demo | Shareable Link
--- | --- | ---
`{{ expansionPanelCode }}` | # panel content | Share
`{{ expansionCollapsedPanelCode }}` | # panel content | Share
`{{ collapsedPanelRightContentCode }}` | # panel content | Share
`{{ panelHeaderRightContentCode }}` | # panel content Right content | Share
`{{ expansionPanelWithDescriptionCode }}` | # panel content with description | Share
`{{ expansionPanelWithToggle }}` | # panel content with show more/less | Share

Required Imports
import { ExpansionPanelModule } from 'nextsapien-component-lib';
Input and Output Properties

Type | Name | Description | Default | Required
--- | --- | --- | --- | ---
Input | title | The title displayed in the expansion panel header. | n/a | true
Input | expanded | Controls whether the panel is expanded or collapsed by default. | true | false
Input | showToggleText | If true, prevents the panel from toggling when the header is clicked. | false | false
Input | descriptionText | An optional description text displayed within the panel content. | n/a | false
Output | expandedChange | Emits an event when the panel's expanded/collapsed state changes. | n/a | false

CSS Properties

Name | Default Value
--- | ---
--lib-expansion-panel-background | #29252d
--lib-expansion-panel-color | #fff
--lib-expansion-panel-title-color | #A8A8A8
--lib-expansion-panel-font-family | 'Gilroy-Regular', serif
--lib-expansion-panel-title-font-size | 14px
--lib-expansion-panel-title-line-height | 150%

Example usage
`{{ collapsedPanelRightContentCode }}`