Skip to content

Show More Button

The <h-show-more-button> webcomponent is used as a button inside <h-show-more> to reveal hidden items. It dispatches the showMore event when clicked, triggering the parent to show all items.

Usage

Place <h-show-more-button> inside <h-show-more>. The button will automatically be styled and handle click events to reveal more items.

Example

HTML
<h-show-more count="3">
    <div show-more-item>Item 1</div>
    <div show-more-item>Item 2</div>
    <div show-more-item>Item 3</div>
    <div show-more-item>Item 4</div>
    <h-show-more-button>Show more</h-show-more-button>
</h-show-more>

DOM Events

This webcomponent dispatches the following DOM events:

  • showMore - dispatched when the button is clicked, instructing the parent to show all items.

CSS Classes

  • .show-more__button - button class

Accessibility

  • The button is focusable and can be activated with keyboard or mouse.

Webomponents reference