Examples

Examples of the accordion module

Default

<div class="read-more" data-read-more>
  <p>This is the introductory text that is always visible to users. If you want to know more, just click the button below!</p>
  <div class="read-more__content">
    <p>
      This is hidden content that will be displayed after clicking the button. You can place additional information, text, images, and even videos here!
    </p>
    <p>
      Here’s another paragraph to demonstrate how you can expand the content. For example, you could add any interesting facts or statistics to make your article more informative.
    </p>
  </div>
  <span class="read-more__button"
        data-read-more-toggler
        data-more-text="Read More"
        data-less-text="Hide">Read More</span>
</div>
.read-more {
  .read-more__content {
    display: none;
  }

  &.active {
    .read-more__content {
      display: block;
    }
  }
}
<script type="module">
  import { readMore } from "wskit";
  readMore.run();
</script>

This is the introductory text that is always visible to users. If you want to know more, just click the button below!

This is hidden content that will be displayed after clicking the button. You can place additional information, text, images, and even videos here!

Here’s another paragraph to demonstrate how you can expand the content. For example, you could add any interesting facts or statistics to make your article more informative.

Read More

Active class mode

Set data-read-more-active-class="{class}" attribute

<div class="read-more" data-read-more data-read-more-active-class="animation-class">
  <p>This is the introductory text that is always visible to users. If you want to know more, just click the button below!</p>
    <div class="read-more__content">
      <p>
        This is hidden content that will be displayed after clicking the button. You can place additional information, text, images, and even videos here!
      </p>
      <p>
        Here’s another paragraph to demonstrate how you can expand the content. For example, you could add any interesting facts or statistics to make your article more informative.
      </p>
    </div>
  <span class="read-more__button" data-read-more-toggler data-more-text="Read More" data-less-text="Hide">Read More</span>
</div>
.read-more {
  .read-more__content {
    max-height: 0;
    opacity: 0;
    display: block;
    overflow: hidden;
    transition: max-height 1s ease, opacity 1s ease;
  }

  &.animation-class {
    .read-more__content {
      max-height: 500px;
      opacity: 1;
    }
  }
}
<script type="module">
  import { accordion } from "wskit";
  accordion.run();
</script>

This is the introductory text that is always visible to users. If you want to know more, just click the button below!

This is hidden content that will be displayed after clicking the button. You can place additional information, text, images, and even videos here!

Here’s another paragraph to demonstrate how you can expand the content. For example, you could add any interesting facts or statistics to make your article more informative.

Read More