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
Last Updated :
12 Feb, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...