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>