Semantic-UI Message Hidden State

Last Updated : 09 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Message offers us 2 states of the message which are visible and hidden. In this article, we will know about the hidden state. Semantic UI Message hidden state is used to hide the message to the audience.

Semantic UI Message Hidden State Class:

hidden: This class is used to create the hidden message.

Syntax:

<div class="ui hidden message">
     ...
</div>

Note: There is one thing to notice in hidden states, this state not just hides the message, it also removes the space for that message.

The below example illustrates the Semantic UI Message Hidden State.

Example 1: In this example, we will use the hidden state of the message.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1 class="ui header green"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI Message Hidden State</strong> 
    </center> 
    <strong>Message Hidden State:</strong> 
    <div class="ui hidden message"> 
        <p>A Computer Science Portal for Geeks</p> 
    </div> 
</body> 
</html>

Output:

Semantic UI Message Hidden State

Example 2: In this example, we will use both states of a message hidden and visible.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
</head> 
<body> 
    <center> 
        <h1 class="ui header green"> 
            GeeksforGeeks 
        </h1> 
        <strong>Semantic UI Message Hidden State</strong> 
    </center> 
    <strong>Message Hidden State:</strong> 
    <div class="ui hidden message"> 
        <p>A Computer Science Portal for Geeks</p> 
    </div> 
    <br> 
    <strong>Message Visible State:</strong> 
    <div class="ui visible message"> 
        <p>A Computer Science Portal for Geeks</p> 
    </div> 
</body> 
</html>