Create Read More / Read Less Functionality for Blog Posts in JavaScript?

Question

Aryan Kumar · Answer

To create a "Read More / Read Less" functionality for blog posts in JavaScript, you can use a combination of HTML, CSS, and JavaScript. Here's a simple example using the concept of toggling between two states for a blog post. The code assumes that your blog post content is initially truncated, and clicking "Read More" expands the content, while "Read Less" collapses it.
HTML:
andlt;!DOCTYPE html>
andlt;html lang="en">
andlt;head>
  andlt;meta charset="UTF-8">
  andlt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  andlt;link rel="stylesheet" href="styles.css">
  andlt;title>Read More / Read Lessandlt;/title>
andlt;/head>
andlt;body>
andlt;div class="blog-post">
  andlt;p class="content">
    This is the truncated content of your blog post. It is initially displayed with a "Read More" link.
  andlt;/p>
  andlt;a href="#" class="read-more-link" onclick="toggleReadMore()">Read Moreandlt;/a>
andlt;/div>
andlt;script src="script.js">andlt;/script>
andlt;/body>
andlt;/html>
CSS (styles.css):
.blog-post {
  max-width: 400px; /* Adjust the maximum width as needed */
  margin: 0 auto;
  overflow: hidden;
}
.content {
  height: 80px; /* Adjust the initial height to show the truncated content */
  overflow: hidden;
}
.read-more-link {
  display: block;
  margin-top: 10px;
  color: blue;
  cursor: pointer;
}
JavaScript (script.js):
function toggleReadMore() {
  var content = document.querySelector('.content');
  var readMoreLink = document.querySelector('.read-more-link');
  if (content.classList.contains('expanded')) {
    // Contract the content
    content.classList.remove('expanded');
    content.style.height = '80px'; // Adjust the initial height
    readMoreLink.textContent = 'Read More';
  } else {
    // Expand the content
    content.classList.add('expanded');
    content.style.height = content.scrollHeight + 'px';
    readMoreLink.textContent = 'Read Less';
  }
}
This example assumes that the content of your blog post is initially truncated with a maximum height. The JavaScript function
toggleReadMore() is responsible for expanding and collapsing the content by adjusting the height. The CSS styles control the appearance and initial state of the blog post. Adjust the values in the CSS and JavaScript code based on your specific requirements.

forum

Create Read More / Read Less Functionality for Blog Posts in JavaScript?

Rahul Roi

Can you answer this question?

1 Answers

Liked By