Semantic-UI Comment Variations Minimal Variant

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 Minimal Variation shows a list of comments with CSS and buttons for a reply. The Minimal variation hides the extra content that is least required for a user until the user requires to interact with the comment.

Semantic-UI Comment Minimal Variation classes:

minimal: On adding this class to the comments div container, the extra information hides from the page.

Syntax:

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

Example: In the following example, we have added a button to enable or disable minimal of the comment.

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 Minimal Variation
    </strong>
    
    <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!
                    <br />
                    The article is so well explained
                </div>
                <div class="actions">
                    <a class="reply">
                        Reply
                    </a>
                </div>
            </div>
        </div>
        <div class="comment">
            <div class="content">
                <a class="author">
                    Raju
                </a>
                <div class="metadata">
                    <span class="date">
                        Yesterday at 12:30AM
                    </span>
                </div>
                <div class="text">
                    <p>
                        Well researched article!
                    </p>
                </div>
                <div class="actions">
                    <a class="reply">
                        Reply
                    </a>
                </div>
            </div>
        </div>
    </div>

    <button class="ui button mini" 
        id="minimalButton" 
        onclick="minimalComment()">
        Enable/Disable Minimal
    </button>
    
    <script>
        function minimalComment() {
            $(".comments").toggleClass("minimal");
        }
    </script>
</body>

</html>

Output:

Semantic-UI Comment Variations Minimal Variant

Reference: https://react.semantic-ui.com/views/comment/#variations-minimal

Semantic-UI Comment Variations Minimal Variant

Explore