Open In App

Semantic-UI Comment States

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. It uses a class to add CSS to the elements.

Comments are an excellent way to display user feedback and interact about the content with other users. Semantic UI provides us with a Semantic UI styled comment element. Let’s have a look at various comment states.

Semantic UI Comment States:

  • Collapsed: Semantic UI allows us to hide the comments from the user’s view by using the collapsed state. Comments can be viewed at the will of the user.

Syntax:

<div class="ui collapsed comments">
  <div class="comment">
    ...
  </div>
  ...
</div>

Note: Use the above syntax according to the need by using a combination of Semantic UI classes. Refer to the examples below for a better understanding of the classes.

Example 1: In the below example, we have created standard comments which can be collapsed at will.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Comment States</title>
    <link href=
          rel="stylesheet" />
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
  
<body>
  
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Comment States</h4>
        <hr>
        <br/>
        <button class="ui button" onclick="toggleComments()">
               Toggle Comments
        </button>
        <div class="ui collapsed comments">
            <h2 class="ui dividing header">Comments</h2>
            <div class="comment">
              <a class="avatar">
                <img src=
              </a>
              <div class="content">
                <a class="author">Mr. Anonymous</a>
                <div class="text">
                  I am watching you. I know all about you.
                </div>
                <div class="actions">
                  <a class="reply">Reply</a>
                </div>
              </div>
            </div>
            <div class="comment">
                <a class="avatar">
                  <img src=
                </a>
                <div class="content">
                  <a class="author">Praneeth</a>
                  <div class="text">
                    Lol. You know nothing about me.
                  </div>
                  <div class="actions">
                    <a class="reply">Reply</a>
                  </div>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        const toggleComments = () => {
            const comments = document.querySelector(".comments");
            comments.classList.toggle("collapsed");
        }
    </script>
</body>
</html>


Output:

Semantic-UI Comment States

Semantic-UI Comment States

Example 2: In the below example, we have created standard comments with a reply form which can be collapsed at will.

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>Semantic UI Comment States</title>
    <link href=
          rel="stylesheet" />
  
    <script src=
            integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" 
            crossorigin="anonymous">
    </script>
  
    <script src=
    </script>
</head>
  
<body>
  
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Comment States</h4>
        <hr>
        <br />
        <button class="ui button" 
                onclick="toggleComments()">
              Toggle Comments
        </button>
        <div class="ui collapsed comments">
            <h2 class="ui dividing header">Comments</h2>
            <div class="comment">
              <a class="avatar">
                <img src=
              </a>
              <div class="content">
                <a class="author">Mr. Anonymous</a>
                <div class="text">
                  I am watching you. I know all about you.
                </div>
                <div class="actions">
                  <a class="reply">Reply</a>
                </div>
              </div>
            </div>
            <div class="comment">
                <a class="avatar">
                  <img src=
                </a>
                <div class="content">
                  <a class="author">Praneeth</a>
                  <div class="text">
                    Lol. You know nothing about me.
                  </div>
                  <form class="ui reply form">
                    <div class="field">
                      <textarea></textarea>
                    </div>
                    <div class="ui primary submit labeled icon button">
                      <i class="icon edit"></i> Add Reply
                    </div>
                  </form>
                </div>
             </div>
        </div>
    </div>
  
    <script>
        const toggleComments = () => {
            const comments = document.querySelector(".comments");
            comments.classList.toggle("collapsed");
        }
    </script>
</body>
</html>


Output:

Semantic-UI Comment States

Semantic-UI Comment States

Reference: https://semantic-ui.com/views/comment.html



Last Updated : 16 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads