6.26.1 Standard View in a new window

A component that shows the first node in a HTML block with a class of .js-read-more and hides the rest. Provides a link to show the additional content and hide it.

Default toggle (link) text is See all / See less but this can be passed through in options for the widget. You can also pass through a query selector for the additional content and toggle element

Twig: components/read-more/read-more.twig

Example

This is the first paragraph.

  • This
  • Is
  • An
  • Unordered
  • List

This is the second paragraph.

This is the third paragraph.

Markup
<div class="js-read-more read-more">
  {% block content %}
    <p>This is the first paragraph.</p>
    <ul>
      <li>This</li>
      <li>Is</li>
      <li>An</li>
      <li>Unordered</li>
      <li>List</li>
    </ul>
    <p>This is the second paragraph.</p>
    <p>This is the third paragraph.</p>
  {% endblock %}
</div>