Show/Hide

Show design guidelines

Code

Framework HTML React Angular

Default

Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.

This content is hidden by default. Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.

Toggle dark mode

<certara-show-hide>
  <p>Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.</p>
  <div slot="hidden-content">
    <p>
      This content is hidden by default. Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.
    </p>
  </div>
</certara-show-hide>

import { CertaraShowHide } from '@certara/certara-ui-react';

<CertaraShowHide>
  <p>Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.</p>
  <div slot="hidden-content">
    <p>
      This content is hidden by default. Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.
    </p>
  </div>
</CertaraShowHide>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-show-hide>
  <p>Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.</p>
  <div slot="hidden-content">
    <p>
      This content is hidden by default. Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.
    </p>
  </div>
</certara-show-hide>

Custom labels

Custom labels example...

This example uses the opened-label and closed-label attributes.

Toggle dark mode

<certara-show-hide closed-label="Read more" opened-label="Hide">
  <p>Custom labels example...</p>
  <div slot="hidden-content">
    <p>This example uses the opened-label and closed-label attributes.</p>
  </div>
</certara-show-hide>

import { CertaraShowHide } from '@certara/certara-ui-react';

<CertaraShowHide closedLabel="Read more" openedLabel="Hide">
  <p>Custom labels example...</p>
  <div slot="hidden-content">
    <p>This example uses the opened-label and closed-label attributes.</p>
  </div>
</CertaraShowHide>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-show-hide closed-label="Read more" opened-label="Hide">
  <p>Custom labels example...</p>
  <div slot="hidden-content">
    <p>This example uses the opened-label and closed-label attributes.</p>
  </div>
</certara-show-hide>

Open

Open by default example

This content is visible by default because of the open attribute.

Toggle dark mode

<certara-show-hide open>
  <p>Open by default example</p>
  <div slot="hidden-content">
    <p>This content is visible by default because of the open attribute.</p>
  </div>
</certara-show-hide>

import { CertaraShowHide } from '@certara/certara-ui-react';

<CertaraShowHide open>
  <p>Open by default example</p>
  <div slot="hidden-content">
    <p>This content is visible by default because of the open attribute.</p>
  </div>
</CertaraShowHide>

// In your module (e.g., app.module.ts)
import { CertaraUiAngularModule } from '@certara/certara-ui-angular';

@NgModule({
  imports: [CertaraUiAngularModule]
})

// In your template:
<certara-show-hide open>
  <p>Open by default example</p>
  <div slot="hidden-content">
    <p>This content is visible by default because of the open attribute.</p>
  </div>
</certara-show-hide>

certara-show-hide

Properties

closedLabel

Attribute	closed-label
Type	string
Default	'Show more'
Required	false
Description	Default label for closed state

open

Attribute	open
Type	boolean
Default	false
Required	false
Description	Hidden content will be visible

openedLabel

Attribute	opened-label
Type	string
Default	'Show less'
Required	false
Description	Default label for opened state

Events

Name	Description	Bubbles
certaraClick		true

Methods

There are no public methods available for this component

Slots

Name	Description
	Container for visible content
hidden-content	Container for the hidden content