A collapsible panel component that shows/hides content with an icon-labeled toggle button. Content visibility is toggled...

A collapsible panel component that shows/hides content with an icon-labeled toggle button. Content visibility is toggled by clicking the button; ideal for supplementary information, detailed explanations, or expandable help text. Use show-hide for: - Toggle additional information on demand - Expand/collapse help text or examples - Progressive disclosure of optional content - Reduce page clutter while keeping content accessible The button displays different text based on state (buttonText vs. hideButtonText), and the icon rotates/animates to indicate expanded/collapsed state. Button appearance is controlled via variant, size, and iconPosition properties.

<ed-show-hide></ed-show-hide>

Properties

Name Type Default Description
isActive Boolean boolean A collapsible panel component that shows/hides content with an icon-labeled toggle button. Content visibility is toggled by clicking the button; ideal for supplementary information, detailed explanations, or expandable help text. Use show-hide for: - Toggle additional information on demand - Expand/collapse help text or examples - Progressive disclosure of optional content - Reduce page clutter while keeping content accessible The button displays different text based on state (buttonText vs. hideButtonText), and the icon rotates/animates to indicate expanded/collapsed state. Button appearance is controlled via variant, size, and iconPosition properties. / export class EdShowHide extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Active state of the show more 1) Reveals hidden information when `true`. Hides when `false`
buttonVariant String 'primary' | 'bare' | 'link' = 'bare' Button style variant for the toggle control <ed-text-passage size="sm"> <ul> <li>**primary** Use for prominent expand/collapse controls</li> <li>**bare** Use for minimal emphasis, common for inline expand/collapse patterns</li> <li>**link** Use when styled as a text link for secondary content expansion</li> </ul> </ed-text-passage>
iconName String string Name of SVG icon
iconPosition String 'before' | 'after' Button icon position
size String 'sm' | 'lg' Size variations: <ed-text-passage size="sm"> <ul> <li>**sm** yields a small button</li> <li>**lg** yields a large button</li> </ed-text-passage>
buttonText String string = 'Show More' Button text
hideButtonText String string = 'Show Less' Hide button text 1) Button text when panel content is exposed to hide the content again

Slots

Name Description
- Hidden content panel (shown/hidden when button is clicked)

Interactive Documentation

Full interactive examples, variant previews, accessibility audits, and the complete API reference are available in Storybook — generated directly from the component source code.

Source

packages/eddie-web-components/components/show-hide/show-hide.ts