# Show More

Table of Contents

###### Examples

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

###### JavaScript Reference

Constructor
Requirements
Attributes
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>

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

- Component
- LazyComponent

### 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.