Open In App

Semantic-UI Reveal Hidden Content

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. In this article, we are going to learn about Reveal Hidden Content.  

It is equipped with pre-built semantic components that help create responsive layouts using user-friendly HTML, and it uses predefined CSS and jQuery to incorporate different frameworks.

A reveal displays additional content in place of previous content when activated and when it is in hidden content then it may contain content that is hidden before user interaction.

Syntax:

<div class="ui small fade reveal image">
    <img class="hidden content" src="gfg.jpg">
</div>

Classes Used:

  • hidden content: This class is used to make hidden content visible.

The below example illustrates the Semantic-UI Reveal Hidden Content:

Example 1:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Reveal Hidden Content
    </title>
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">
            GeeksforGeeks</h1>
        <strong> Semantic-UI </strong>
        <h3 class="ui dividing header">
            Reveal Hidden Content
        </h3>
    </center>
  
    <div class="ui small fade reveal image">
        <img class="visible content"
            src=
        <img class="hidden content" src=
    </div>
</body>
  
</html>


Output:

Example 2:

HTML




<!DOCTYPE html>
<html>
  
<head>
    <title>
        Semantic-UI Reveal Hidden Content
    </title>
  
    <link href=
        rel="stylesheet" />
</head>
  
<body>
    <center>
        <h1 class="ui header green">GeeksforGeeks</h1>
        <strong> Semantic-UI </strong>
        <h3 class="ui dividing header">
            Reveal Hidden Content
        </h3>
    </center>
  
    <div class="ui small fade reveal image">
        <img class="hidden content"
            src=
    </div>
</body>
  
</html>


Output:

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



Last Updated : 14 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads