Creating a "Continue Reading" button

[SamanthaLumang]

Hello, there! We've received requests from clients quite a number of times about creating a "continue reading" or "read full article" button for long text that they want hidden to shorten a page's length. Something like the image below. Has anyone has tried creating a button like it before?

[Jaycee_Lewis]

Hey, there! With this type of request in the community, a better approach is sharing what you've built and where you are stuck. While our community can help with code, they typically cannot provide custom code from scratch.

If it were me, here's where I'd start:

• CSS for hidden content
  

  .hidden-content {
      display: none;   /* hide the content */
      overflow: hidden;
      transition: max-height 0.5s ease; /* optional */
  }​

• HTML for content:
  

  <div class="content">
      <!-- Your initially visible content goes here -->
      <div class="hidden-content" id="hiddenContent">
          <!-- Your hidden content goes here -->
      </div>
      <button class="read-more-btn" id="readMoreBtn">Continue Reading</button>
  </div>
  ​

• The JS is where you'll need more technical help to handle the button click and reveal the hidden content.

Other considerations:

• Include your JavaScript after the HTML content or in a DOMContentLoaded event
• You can place the JavaScript at the bottom of your HTML or use event listeners to ensure it runs after the DOM is loaded

Have fun building!  — Jaycee