How to Create a Read More Read Less Button With JavaScript

how-to-create-a-read-more-read-less-button-with-javascript

As a website or blog owner, you may want to give your users the option to read more or read less of your content.

This can help reduce clutter on your page and make it more user-friendly.

In this quick tutorial, we’ll show you how to create a Read More/Read Less button using JavaScript.

Read More/Read Less button

When it comes to presenting content on a website, it’s important to strike a balance between providing enough information to engage your audience and not overwhelming them with too much information.

That’s why a Read More/Read Less button can be a valuable addition to your site.

This button allows users to choose whether they want to see more or less of your content, giving them control over their browsing experience.

How to Create a Read More/Read Less Button

Here’s how to create a Read More/Read Less button in JavaScript:

HTML Markup

The first step is to create the HTML markup for your content.

For this example, we’ll use a simple paragraph of text. Wrap the content you want to hide in a div with a class of “content”:

<div class="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in tellus vel enim congue ullamcorper. Proin euismod ipsum velit, vel convallis ipsum tempor ac. Aenean facilisis justo id lacus congue aliquet. In hac habitasse platea dictumst.</p>
</div>

Next, create the Read More/Read Less button. This can be done using an anchor tag with a class of “read-more”:

<a href="#" class="read-more">Read More</a>

CSS Styles

Now, let’s add some CSS styles to make our content and button look presentable:

.content {
  max-height: 100px;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

.read-more {
  display: block;
  margin-top: 10px;
}

JavaScript Functionality

The last step is to add the JavaScript functionality to make the Read More/Read Less button work.

Add the following code to the end of your HTML file:

<script>
  var content = document.querySelector('.content');
  var btn = document.querySelector('.read-more');
  
  btn.addEventListener('click', function(event) {
    event.preventDefault();
    if (content.style.maxHeight) {
      content.style.maxHeight = null;
      btn.textContent = 'Read More';
    } else {
      content.style.maxHeight = content.scrollHeight + 'px';
      btn.textContent = 'Read Less';
    }
  });
</script>

This code uses the querySelector method to select the content div and the Read More button.

It then adds a click event listener to the button that changes the max-height property of the content div.

If the content is hidden, the max-height is set to the scroll height of the content, making it visible. If the content is already visible, the max-height is set to null, hiding it again.

The text content of the button is also updated to reflect whether the content is hidden or visible.

Conclusion

That’s it! With just a few lines of HTML, CSS, and JavaScript, you now have a functional Read More/Read Less button for your website.

This simple but effective feature can improve the user experience on your site by giving visitors control over the amount of information they see at any given time.

Of course, this is just a basic example, and there are many ways to customize and expand upon this functionality.

You can add animations, change the styling, or even add the functionality to multiple sections of content on your site.

The possibilities are endless, so feel free to experiment and see what works best for your needs.

We hope this article has been helpful in showing you how to create a Read More/Read Less button with JavaScript.

Tags

Related Posts