Show/Hide

Design guidelines

Show/Hide is used to show more of the same content that is already visible. For example a list of items or attributes that is longer than its initial container view allows.

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

Show/Hide is used to show more of the same content that is already visible. For example a list of items or attributes that is longer than its initial container view allows.

Design guidelines

Example

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

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

Toggle dark mode

In practice

The Show/Hide uses the link button style with left icon placement. It includes the plus (+) icon by default and is labeled “Show More”. When selected, the icon changes to a minus (-) and the label changes to “Show Less”.

Use Show/Hide in sections or containers that are compact but include additional information that should be accessible. This component is generally used individually as needed and does not appear in groups.

Accessibility

• Show/Hide is keyboard operable.
• The Show/Hide requires javascript. Creating this widget in a frontend framework (or with vanilla javascript) would involve:
  • A button (or a control with role=“button”) that acts as the control that toggles display.
  • Adding aria-expanded with either true or false to convey to assistive technology whether the widget is expanded or not.
  • Adding aria-controls with with the value of the id from the element whose visibility is being toggled. Screen reader support for this is sparse, but this association may allow for easier reference via CSS or script.
• For more information, see our accessibility guidelines.

Design resources

View component in Figma