Tickster Styleguide

Appearance

Show more ​

When to use it ​

The Show more component is a JS component used to display a truncated portion of text with an option to expand and show the full content. It is commonly used for long paragraphs or lists where displaying the full content initially would take up too much space.

The button inherits two classes from the Button component (c-button and c-button--small) and has its own class (.c-button--showmore) for positioning.

Variants ​

To include a "Show less" button when the text is expanded, add the data-show-less attribute to the element.

What it looks like ​

Code examples ​

html
<div class="c-box" data-show-more="Show all">
    <p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
    <p>Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
    <p>Dolor sit amet. Ut enim ad minim veniam, <a href="#">quis nostrud</a> ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
</div>
html
<div class="c-card">
    <div class="c-card__body" data-show-more="Show more" data-show-less="Show less">
        <p>Lorem ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
        <p>Ipsum dolor sit amet. Ut enim ad minim veniam, quis nostrud ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat.</p>
        <p>Dolor sit amet. Ut enim ad minim veniam, <a href="#">quis nostrud</a> ea commodo consequat. Ad minim veniam, quis nostrud exercitation commodo consequat. um dolor sit amet. Ut enim ad minim veniam, quis nostrud </p>
    </div>
</div>

Accessibility notes ​

This component adds suitable ARIA roles to the elements (e.g. aria-expanded) to enhance accessibility. It does not however move the focus to the content, should there be any focusable content there. That content comes next in the tab order though so getting there is just a keystroke away.