Show More

Table of Contents

Examples

Basic Usage
"More" / "Less" Button Text
Closed Height

JavaScript Reference

Constructor
Requirements
Properties
CSS Custom Properties
Methods

Basic Usage

<k-show-more>
  <p>Lorem ipsum dolor...</p>
</k-show-more>

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eius explicabo similique laudantium ipsa suscipit officia! Iusto, maxime. Sapiente velit nostrum perspiciatis aut quod ipsa maiores libero praesentium, ducimus optio ex repellendus deleniti eaque quam, consectetur vero dicta molestias est voluptate deserunt, rerum earum dolorem sequi. Doloribus deserunt ab dolor nihil! Eos quisquam, reprehenderit hic facere cumque ea possimus natus vitae veniam ratione totam aliquid iure enim, error magni. Animi laborum dignissimos odit, minima suscipit assumenda voluptates aspernatur deserunt harum atque consequuntur laudantium libero maxime nobis impedit, ducimus ipsam enim! Magnam voluptatem numquam nemo dignissimos? Dolores suscipit beatae hic aperiam dignissimos?

"More" / "Less" Button Text

Change the text of the show "more" or "less" buttons by creating an element that has a slot attribute of "more" or "less".

<k-show-more>
  <p>Lorem ipsum dolor...</p>
  <span slot="more">Reveal Details</span>
  <span slot="less">Hide Details</span>
</k-show-more>

Reveal Details Hide Details

Closed Height

Change the height of the closed state by setting the --closed_height CSS Custom Property.

<k-show-more
  style="--closed_height: 4rem"
>
  <p>Lorem ipsum dolor...</p>
</k-show-more>

JavaScript Reference

Constructor

Extends ShadowComponent

`new ShowMore()`

Requirements

Properties

`opened: boolean`

Whether the content is expanded. Syncs to opened attribute.

CSS Custom Properties

`--closed_height`

The height of the content when in the collapsed state. Default is 7rem.

Methods

`more(): void`

Expands the content.

`less(): void`

Collapses the content.

`toggle(): void`

Toggles the content between expanded and collapsed states.