Semantic-UI Reveal States
Last Updated :
22 Apr, 2022
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>
<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
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>
<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
Reference: https://semantic-ui.com/elements/reveal.html
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...