Show More

When you need to toggle visibility of additional content in a responsive and accessible manner, the ShowMore component provides the functionality.

Basic

The ShowMore component is primarily used to encapsulate content that can be expanded or collapsed. It renders the content as initially hidden, and it expands to show more when interacted with by the user.

Installation

If you hit any issues, make sure you check out the installation guide here.

Manual Installation

Sometimes, using the CLI is the way to go, so make sure you install the necessary dependencies for the components you want to use.

Anatomy

Import the components and use them as shown below, adapting the structure to fit each component.

import { IconChevronLgDown } from "justd-icons"
import { cn, ShowMore } from "ui"
 
<ShowMore>
  {({ isSelected }) => (
    <>
      Show {isSelected ? "less" : "more"}
      <IconChevronLgDown
        className={cn(
          isSelected ? "rotate-180" : "",
          "size-4 transition-transform duration-200"
        )}
      />
    </>
  )}
</ShowMore>

As Text

While the default behavior utilizes a button for interactions, the ShowMore component can also be configured to function as a clickable text element.

Controlled

Gain fine-grained control over the ShowMore component's behavior. This setup ensures you can manage the expanded state externally, ideal for more complex interactions.

Orientation

The default orientation for the ShowMore component is horizontal. However, it can easily be adjusted to a vertical layout to suit different design needs.