Tickster Styleguide

Appearance

v2.40.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), set --c-showmore-height in the style attribute or a CSS rule (e.g. 150px as used below). Use a positive value in px; JavaScript reads its numeric value as pixels, so other units and expressions such as calc() are not supported. The same value controls both the threshold for showing the button and the truncated height.

To truncate content before JavaScript runs, also include is-truncated in the initial markup. The height then applies immediately; JavaScript adds the button or removes the class if the content fits. Without JavaScript, initially truncated content remains truncated.

When migrating from data-show-truncated="150", replace it with style="--c-showmore-height: 150px".

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 is-truncated" data-show-more="Show all" style="--c-showmore-height: 150px">
    <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.