CSS
How to Design a Nested Chat Comments System using HTML, CSS, and JavaScript
Building a nested chat comments interface is a great way to add interactive discussions to blogs, social apps, or forums. These threaded conversations help users reply directly to specific comments, creating organized and meaningful discussions.
In this tutorial, you’ll learn how to:
- Structure nested comments with HTML
- Style them with CSS
- Use JavaScript to add replies dynamically
Let’s build a simple, clean, and expandable nested comments UI from scratch.
🧱 Step 1: HTML Structure
We’ll start with a basic layout for user comments and nested replies.
<div id="comments-container" class="comments">
<div class="comment">
<p><strong>User 1:</strong> This is a top-level comment.</p>
<button class="reply-btn">Reply</button>
<div class="replies"></div>
</div>
</div>
🔧 Notes:
- Each
.commentholds the content and aReplybutton. - Nested replies are appended inside the
.repliesdiv.
🎨 Step 2: CSS for Styling
Let’s style the chat layout and provide indentation for nested comments.
.comments {
max-width: 600px;
margin: 20px auto;
font-family: Arial, sans-serif;
}
.comment {
background: #f1f5f9;
border-radius: 5px;
padding: 10px 15px;
margin-bottom: 10px;
position: relative;
}
.comment .reply-btn {
margin-top: 5px;
font-size: 0.9rem;
background: none;
border: none;
color: #007bff;
cursor: pointer;
}
.replies {
margin-left: 30px;
margin-top: 10px;
}
✅ This creates a clean UI with indented nested replies.
⚙️ Step 3: JavaScript to Handle Replies
We’ll allow users to click Reply, type a response, and have it added under the correct comment.
<script>
document.addEventListener("click", function (e) {
if (e.target.classList.contains("reply-btn")) {
const parentComment = e.target.parentElement;
const replyBox = document.createElement("div");
replyBox.innerHTML = `
<textarea rows="2" placeholder="Your reply..." class="reply-input"></textarea>
<br>
<button class="submit-reply">Post Reply</button>
`;
parentComment.appendChild(replyBox);
e.target.disabled = true; // prevent multiple reply boxes
replyBox.querySelector(".submit-reply").addEventListener("click", function () {
const replyText = replyBox.querySelector(".reply-input").value;
if (replyText.trim()) {
const newReply = document.createElement("div");
newReply.classList.add("comment");
newReply.innerHTML = `<p><strong>You:</strong> ${replyText}</p><button class="reply-btn">Reply</button><div class="replies"></div>`;
parentComment.querySelector(".replies").appendChild(newReply);
parentComment.removeChild(replyBox);
e.target.disabled = false;
}
});
}
});
</script>
🧠 How It Works:
- On
Reply, a<textarea>andPost Replybutton are shown. - On submit, a new comment is created and added to the
.repliessection of the parent. - Each new comment includes its own
Replybutton, enabling infinite nesting.
🧪 Final Output (Demo Structure)
Here’s the full working HTML to test locally:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Nested Chat Comments</title>
<style>
/* Include CSS here */
</style>
</head>
<body>
<div id="comments-container" class="comments">
<div class="comment">
<p><strong>User 1:</strong> This is a top-level comment.</p>
<button class="reply-btn">Reply</button>
<div class="replies"></div>
</div>
</div>
<script>
// Include JS here
</script>
</body>
</html>
📝 Conclusion
With just HTML, CSS, and vanilla JavaScript, you can build a fully functional nested comment system. This basic implementation can be extended with:
- Local storage or database integration
- User authentication
- Edit/delete functionality
- Rich text or emoji support
🔑 Summary
| Feature | Implemented With |
|---|---|
| Base comment layout | HTML |
| Nesting replies | CSS margin-left |
| Reply logic | JavaScript event handling |