Show/Hide

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

Certara UI

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

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

certara-show-hide

Properties

Property	Attribute	Description	Type	Default
closedLabel	closed-label	Default label for closed state	string	'Show more'
open	open	Hidden content will be visible	boolean	false
openedLabel	opened-label	Default label for opened state	string	'Show less'

Events

Event	Description	Type
certaraClick		CustomEvent<any>

Slots

Slot	Description
	Container for visible content
"hidden-content"	Container for the hidden content

---

Custom labels

Custom labels...

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...</p>
      <div slot="hidden-content">
        <p>This example uses the <code>opened-label</code> and <code>closed-label</code> attributes</p>
      </div>
</certara-show-hide>

Open

Open example

This is open by default

Toggle dark mode

<certara-show-hide open>
      <p>Open example</p>
      <div slot="hidden-content">
        <p>This is open by default</p>
      </div>
</certara-show-hide>

HTML

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.

+ Show more

Toggle dark mode

<p>Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.</p>

<div class="show-more" style="display:none" id="show">
  <p>Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus. Lacinia neque, sit amet dictum enim enim ut libero. Pellentesque sagittis tellus.</p>
</div>
<a class="btn-show-more link hover-text-underline" href="#show">+ Show more</a>

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