Skip to content

Show More

The <h-show-more> webcomponent is used to display a limited number of items and reveal more on user request, typically for mobile views or long lists. It works together with the <h-show-more-button> webcomponent to provide a seamless functionality and accessibility features.

Attributes

Attribute name Type Default Description
count number - Number of items to show before hiding the rest.
mobile-only boolean false If set, the show more functionality is only active on mobile view.
show-all boolean false If set, all items are shown and the button is hidden.

Usage

To use <h-show-more>, wrap the items you want to limit and add the show-more-item attribute to each item you want to target. Place an <h-show-more-button> inside to provide the button for revealing more items.

Example

HTML
<h-show-more count="3" mobile-only>
    <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 listens to the following DOM events:

  • showMore (dispatched by <h-show-more-button>, reveals all items)

Accessibility

  • Focus is moved to the next item after showing more, for better keyboard navigation.
  • Hidden items use the hidden attribute making them invisible to all users.

CSS Classes

  • .show-more - main container class
  • .show-more__button - button class

Webcomponents reference