Open In App

Semantic-UI Reveal Content

Last Updated : 22 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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




<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




<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



Previous Article
Next Article

Similar Reads

Semantic-UI Reveal Hidden Content
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 Hidden Content. It is equipped with pre-built semantic components that help create
2 min read
Semantic-UI Reveal Visible Content
Semantic UI is an open-source development framework that provides pre-defined classes to make our website look beautiful, amazing, and responsive. It is similar to Bootstrap which has predefined classes. It uses jQuery and CSS to create the interfaces. It can also be directly used via CDN like bootstrap. Reveal is a feature in Semantic-UI in which
2 min read
Semantic-UI Reveal Variations
Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website. In this article, we will discuss Reveal
2 min read
Semantic-UI | Reveal
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. It uses a class to add CSS to the elements. Reveal show content in place of previous content when activated or hovered. Example 1: Fadi
2 min read
Semantic-UI Reveal Disabled State
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. It is equipped with pre-built semantic components that help create
2 min read
Semantic-UI Reveal Instant Variation
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 Instant variation. It is equipped with pre-built semantic components that help crea
2 min read
ReactJS Semantic UI Reveal Element
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 the predefined CSS, JQuery language to incorporate in different frameworks. Reveal element in ReactJS Semantic UI is used to reveal the content by hovering over the previous content. Properti
2 min read
Semantic-UI Reveal Move Type
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. Semantic UI provides us with a very easy way to reveal content in a very easy way instead of using CSS. Semantic UI Reveal is a feature
4 min read
Semantic-UI Reveal Fade Type
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. Semantic UI Reveal is used for revealing content easily instead of using CSS. In Semantic-UI Reveal additional content is displayed ins
2 min read
Semantic-UI Reveal Rotate Type
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. Semantic-UI provides us with a very easy way to present a better user interface when compared to traditional CSS. One of the features S
2 min read