Open In App

Design a Nested Chat Comments using HTML CSS and JavaScript

Last Updated : 26 Jul, 2024
Comments
Improve
Suggest changes
1 Like
Like
Report

In this article, we will learn how to create Nested Comments using JavaScript. We must have seen it on social media like Facebook, Instagram, Youtube, Twitter, etc. We have seen the use of the nested comment in the comment section of these social sites.

Approach:

  • Create a folder nested-comments on your local machine and go to that folder.
  • Create 3 files inside that folder index.html, style.css, script.js

Example: In this example, we will create the Nested Comments using Javascript.

HTML
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" 
          content="width=device-width, 
                   initial-scale=1.0" />
    <link rel="stylesheet" href="styles.css" />
    <title>Nested Comments</title>
</head>

<body>
    <div class="container">
        <div id="comment-container" 
             class="comment-container">
            <div class="all-comment">
                <div class="card">
                    <span class="text">GFG</span>
                    <span id="reply" 
                          class="reply">
                          Add Reply
                      </span>
                </div>
            </div>
        </div>
    </div>
  
    <script src="script.js"></script>
</body>

</html>
CSS JavaScript

Output:



Next Article

Similar Reads