Read More

An enhanced block of text, where you can show/hide information.

<div class="read-more" data-show="Read more " data-hide="Read less">
    <div class="read-more__content">
        <p>Illum deleniti quaerat ut ut hic dolor. Magni in et voluptas ratione optio. Quos dolorem magnam debitis iure distinctio cumque voluptatibus aspernatur ipsam. Occaecati harum excepturi delectus. Cupiditate necessitatibus laudantium consequatur et animi distinctio.

            Amet consequatur aut beatae eum rerum minus voluptas. Sint est sed vel ut corrupti nisi quia. Ipsam tempore iure excepturi ratione qui porro ut id. Numquam error reiciendis cum.

            Dolorem id id unde eos delectus accusamus inventore dicta. Odio et placeat ut impedit facilis necessitatibus et. Facilis voluptas rem nihil. Vel doloremque quod. Asperiores amet et provident debitis dolorem unde velit.

            Quas velit exercitationem eveniet aut et ipsum dolores labore. Quia cupiditate maiores consequuntur sequi eaque dolore praesentium ad. Ut non cum numquam deserunt beatae officia.

            Quae accusantium a aliquid eos harum. Culpa voluptatem provident quia et suscipit non. Magnam ut nesciunt quo vero eos autem non minima. Harum mollitia nulla sed. Et blanditiis debitis et voluptatem beatae. Ex culpa amet fugit sed unde atque recusandae quo eos.</p>
    </div>

    <div class="read-more__toggle">
        <button class="button button--small ">
            <span>Read more</span>
        </button>

    </div>
</div>
<div class="read-more" data-show="{{ trigger.text }} " data-hide="{{ trigger.hide }}">
  <div class="read-more__content">
      <p>{{ text }}</p>
  </div>

  <div class="read-more__toggle">
    {{#if button}}
      {{ render '@button' button merge=true }}
    {{else}}
      <button class="link"><span>{{ trigger.text }}</span></button>
    {{/if}}
  </div>
</div>