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= 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
Reference: https://semantic-ui.com/views/comment.html#collapsed
Please Login to comment...