A content expansion component with "Show More/Show Less" functionality. Content is divided into visible (always shown)...

A content expansion component with "Show More/Show Less" functionality. Content is divided into visible (always shown) and hidden (revealed on expand) sections. Ideal for progressively disclosing long-form content, lists, or features. Use show-more for: - Expand long articles or descriptions (preview + full text) - Show initial items with "View More" to reveal hidden items - Feature lists with expandable details - Progressive content disclosure reducing initial page load perception Slots: - `shown`: Always visible content (preview/teaser) - `hidden`: Content revealed when expanded Button automatically displays "Show More" (with plus icon) or "Show Less" (with minus icon) based on expanded state. All styling is controlled via component styles.

<ed-show-more></ed-show-more>

Properties

Name Type Default Description
isActive Boolean boolean A content expansion component with "Show More/Show Less" functionality. Content is divided into visible (always shown) and hidden (revealed on expand) sections. Ideal for progressively disclosing long-form content, lists, or features. Use show-more for: - Expand long articles or descriptions (preview + full text) - Show initial items with "View More" to reveal hidden items - Feature lists with expandable details - Progressive content disclosure reducing initial page load perception Slots: - `shown`: Always visible content (preview/teaser) - `hidden`: Content revealed when expanded Button automatically displays "Show More" (with plus icon) or "Show Less" (with minus icon) based on expanded state. All styling is controlled via component styles. / export class EdShowMore extends EdElement { static get styles() { return unsafeCSS(styles.toString()); } /** Active state of the show more 1) Reveals hidden information when `true`. Hides when `false`
buttonText String string = 'Show More' Button text
hideButtonText String string = 'Show Less' Hide button text 1) Used for the button text when the content is expanded

Slots

Name Description
shown Always visible preview content
hidden Content revealed on expansion

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-more/show-more.ts