Skip to content
Related Articles

Related Articles

Semantic-UI Reveal States

View Discussion
Improve Article
Save Article
  • Last Updated : 22 Apr, 2022
View Discussion
Improve Article
Save Article

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. In this article, we are going to learn about Reveal Disabled State. A reveal displays additional content in place of previous content when activated and it will not animate when hovered in a disabled state. The semantic UI Reveal States offers us Active and Disabled.

Semantic-UI Reveal States:

  • Active: If it is used then an element can show its content without delay.
  • Disabled: It is used to disabled reveal will not animate when hovered

Syntax:

<div class="ui Reveal-States move reveal">
    ...
</div>

Below example illustrate the Semantic-UI Reveal States:

Example 1: In this example, we will use the Active state.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Reveal States</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic-UI Reveal States</strong>
    </center>
 
    <!-- Active class is used -->
    <strong>Reveal Active States:</strong>
    <div class="ui active move reveal">
        <div class="visible content">
            <img src=
                class="ui small image">
        </div>
        <div class="hidden content">
            <img src=
                class="ui small image">
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Reveal States

Semantic-UI Reveal States

Example 2: In this example, we will use a disabled state.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic-UI Reveal States</title>
    <link href=
        rel="stylesheet" />
</head>
 
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks
        </h1>
        <strong>Semantic-UI Reveal States</strong>
    </center>
    <strong>Reveal States:</strong>
    <div class="ui move reveal">
        <div class="visible content">
            <img src=
                class="ui small image">
        </div>
        <div class="hidden content">
            <img src=
                class="ui small image">
        </div>
    </div>
    <!--disabled class is used-->
    <strong>Reveal Disabled States:</strong>
    <div class="ui disabled move reveal">
        <div class="visible content">
            <img src=
                class="ui small image">
        </div>
        <div class="hidden content">
            <img src=
                class="ui small image">
        </div>
    </div>
</body>
 
</html>


Output:

Semantic-UI Reveal States

Semantic-UI Reveal States

Reference: https://semantic-ui.com/elements/reveal.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!