Today create a simple “Read More or Less with JavaScript” feature to make long paragraphs cleaner and easier to read. It shows only a short preview of the text at first and lets readers expand it to see the full content. When they click “Read Less,” the paragraph collapses again to its short version. This feature improves readability, saves space, and helps keep your web page organized and user-friendly.
Create index.html file and copy code and paste code our layout.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Image Box with Read More By Mycodingtutorial</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="box">
<img src="image-1.png" alt="Sample Image">
<div class="content">
<p class="text short">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
<span class="more-text">
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip.
</span>
</p>
<button class="read-btn" onclick="toggleText(this)">Read More</button>
</div>
</div>
</div>
<script>
function toggleText(button) {
const text = button.previousElementSibling;
text.classList.toggle('expanded');
if (text.classList.contains('expanded')) {
button.textContent = 'Read Less';
} else {
button.textContent = 'Read More';
}
}
</script>
</body>
</html>You will also like this post
- Designing Stunning Team Member Card with HTML & CSS
- Responsive Service Card Design HTML & CSS
- Responsive Service Card Design using HTML & CSS
- Pricing Table CSS: Simple Tricks for a Better Design.
- Simple Code Tricks to Make Your Postcard Slider Look Better
Create style.css file and copy code and paste code our layout.
/* Reset and basic setup */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background: #4db2ec;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
/* Container and box */
.container {
padding: 20px;
width: 100%;
max-width: 400px;
}
.box {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
/* Image */
.box img {
width: 100%;
display: block;
height: auto;
}
/* Content */
.content {
padding: 20px;
}
.text {
font-size: 17px;
color: #000;
line-height: 1.6;
position: relative;
}
/* Hide extra text by default */
.text .more-text {
display: none;
}
/* When expanded, show full text */
.text.expanded .more-text {
display: inline;
}
/* Button */
.read-btn {
margin-top: 10px;
padding: 10px 20px;
background-color: #ff184e;
color: white;
border: 2px solid #ff184e;
border-radius: 5px;
font-weight: 500;
cursor: pointer;
}
.read-btn:hover {
color: #ff184e;
border: 2px solid #ff184e;
background-color: #fff;
font-weight: 500;
}
/* Responsive */
@media (max-width: 600px) {
.content {
padding: 15px;
}
.read-btn {
width: 100%;
}
}
