Skip to main content

Show More

Paragraphs

Show More

Collapses part of a text behind an inline "show more" toggle — write [...] markers in the text and the component does the rest. Two variants: inline (within one paragraph) and block (several paragraphs).

Live example

Our discovery phase starts with stakeholder interviews and desk research. [...]After the initial week, we synthesise the findings into a one-page hypothesis map, then validate it with a small quantitative survey before moving into the strategy phase.

Our deliverables are designed to be useful long after the engagement ends.

[...]

You receive a stakeholder report, a two-day strategy workshop, and a 12-month implementation roadmap with quarterly milestones.

The roadmap is structured so internal teams can pick it up and run with it on their own.

[...]
<p class="show-more-inline">Our discovery phase starts with stakeholder interviews and desk research. [...]After the initial week, we synthesise the findings into a one-page hypothesis map, then validate it with a small quantitative survey before moving into the strategy phase.</p>

<div class="show-more-inline-block">
<p>Our deliverables are designed to be useful long after the engagement ends.</p>
[...]
<p>You receive a stakeholder report, a two-day strategy workshop, and a 12-month implementation roadmap with quarterly milestones.</p>
<p>The roadmap is structured so internal teams can pick it up and run with it on their own.</p>
[...]
</div>
ClassBehaviour
show-more-inlineOn a paragraph: everything after the single [...] marker is collapsed behind an inline "show more" toggle
show-more-inline-blockOn a wrapper div: the content between the two [...] markers is collapsed as a block; the second marker sets where the collapse icon appears

The [...] markers are typed as plain text; the JavaScript replaces them with the expand/collapse controls.