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.
Reveal is a feature in Semantic-UI in which additional content can be displayed instead of the previous content when the element is activated. Semantic UI offers different types of reveal like fade, move and rotate and with different types of display of contents which include Visible content, Hidden Content, and also in different variations and states.
In this article, we are going to learn about Semantic-UI Reveal Content and also learn how to implement it with the help of code examples.
Semantic-UI Reveal Content: It includes Visible content and Hidden Content
- Visible Content: The additional content will be visible even before the element is activated and when an element is activated, it displays previous content.
Syntax:
<div class="ui small fade reveal image"> <img class="visible content" src="Link"> <img class="hidden content" src="Link"> </div>
Example: This example illustrates the Reveal Content in Semantic-UI by setting the class value from visible content to hidden content.
<html>
<head>
<title>Semantic-UI Reveal Content</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic-UI Reveal Content</strong>
<br>
<div class="ui small fade reveal image">
<img src=
class="visible content">
<img src=
class="hidden content">
</div>
</div>
</body>
</html>
|
Output:
- Hidden Content: The additional content will be hidden before the element is activated and when an element is activated, it displays additional content.
Example: This example illustrates the Reveal Content in Semantic-UI by setting the class value from hidden content to visible content.
<html>
<head>
<title>Semantic-UI Reveal Content</title>
<link href=
rel="stylesheet" />
<script src=
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<h2 class="ui header green">GeeksforGeeks</h2>
<strong>Semantic-UI Reveal Content</strong>
<br>
<div class="ui small fade reveal image">
<img src=
class="hidden content">
<img src=
class="visible content">
</div>
</div>
</body>
</html>
|
Output:
Reference: https://semantic-ui.com/elements/reveal.html#content