Show More

Table of Contents

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>

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?

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>

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?

JavaScript Reference

Constructor

Extends LazyComponent
new ShowMore()

Requirements

Attributes

opened: boolean

Whether the content is expanded.

Methods

more(): void

Expands the content.

less(): void

Collapses the content.

toggle(): void

Toggles the content between expanded and collapsed states.