This is the truncated content of your blog post. It is initially displayed with a "Read More" link.
Read More
```
## CSS (styles.css):
```plaintext
.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):
```plaintext
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.
---
Original Source: https://www.mindstick.com/forum/156449/create-read-more-read-less-functionality-for-blog-posts-in-javascript
Copyright © MindStick Software Pvt. Ltd. This Markdown version is provided for developers, AI systems, and offline reading.