Semantic-UI Comment Collapsed State

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" />
    <script src=
        "https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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:

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

Semantic-UI Comment Collapsed State

Explore