Tickster Styleguide

Appearance

v2.38.3

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.

To use a custom "crop height" (default is 200px), add data-show-truncated with a numeric value (e.g. 150 as used below). This value is used both as a threshold for when the feature kicks in and as a CSS value to control the height, measured in px. (If not set, the truncated area is set in rem instead.)

What it looks like ​

Code examples ​

html
<div class="c-article c-article--center" data-show-more="Show all">
    <div class="c-article__body">
        <h2 class="c-article__title">A rather long article title that will wrap on many lines</h2>
        <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>
</div>
html
<div class="c-article c-article--center" data-show-more="Show all" data-show-less="Show less">
    <div class="c-article__body">
        <h2 class="c-article__title">A rather long article title that will wrap on many lines</h2>
        <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>
</div>
html
<div class="c-article c-article--center" data-show-more="Show all" data-show-truncated="150">
    <div class="c-article__body">
        <h2 class="c-article__title">A rather long article title that will wrap on many lines</h2>
        <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>
</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.