Open In App

Semantic-UI Comment Collapsed State

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic-UI Comment Collapsed State shows a list of comments with CSS and buttons for a reply. The Collapsed State is used to show or hide the comments from the screen. 

Semantic-UI Comment Collapsed State Classes:

  • collapsed: On adding this class to the div container the container hides from the view or web page.

Syntax:

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

Example: In the following example, we have added a button to show or hide the comment from the screen.

HTML




<!DOCTYPE html>
<html lang="en">
  
<head>
    <link href=
        rel="stylesheet" />
    <script src=
    </script>
    <script src=
    </script>
</head>
  
<body>
    <h1>GeeksforGeeks</h1>
  
    <strong>
        Semantic-UI Comment Collapsed State
    </strong>
      
    <button class="ui button red mini" 
        onclick="collapseComment()">
        Hide/Show Comments
    </button>
  
    <div class="ui mini comments" id="comments">
        <h3 class="ui dividing header" 
            id="commentsHeader">
            Comments
        </h3>
        <div class="comment">
            <div class="content">
                <a class="author">
                    Manav
                </a>
                <div class="metadata">
                    <span class="date">
                        Today at 5:42PM
                    </span>
                </div>
                <div class="text">
                    How artistic!
                </div>
                <div class="actions">
                    <a class="reply">
                        Reply
                    </a>
                </div>
            </div>
        </div>
        <div class="comment">
            <div class="content">
                <a class="author">
                    Elliot Fu
                </a>
                <div class="metadata">
                    <span class="date">
                        Yesterday at 12:30AM
                    </span>
                </div>
                <div class="text">
                    <p>
                        This has been very useful for
                        my research. Thanks as well!
                    </p>
  
                </div>
                <div class="actions">
                    <a class="reply">
                        Reply
                    </a>
                </div>
            </div>
        </div>
    </div>
  
    <script>
        function collapseComment() {
            $(".comments").toggleClass("collapsed");
        }
    </script>
</body>
  
</html>


Output:

Semantic-UI Comment Collapsed State

Semantic-UI Comment Collapsed State

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



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