Controlling the Visibility of Elements using CSS

CSS visibility property is used to specify a value corresponding to whether the element will be visible or not in the document. Though the element is rendered but if CSS Visibility is set to hidden then it is not made visible.

The following are the CSS Visibility values used to control the element's visibility −

Sr.No Value & Description
1 Visible
It is default, element and its children are visible
2 hidden
It hides the element and its children are invisible, but element is still rendered and given appropriate space on the page
3 collapse
It is used only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, and space taken up by the row or column will be available for other content If used on other elements, it renders as ?hidden'
4 initial
It sets the visibility of the element to its default value
5 inherit
It specifies that the value of the visibility property should be inherited from the parent element

Display an Element

The CSS Visibility visible property is used to display an element. Here, we are displaying the heading 1 −

h1 {
   visibility: visible;
}

Example

Let us see an example to display an element on a web page −

<!DOCTYPE html>
<html>
<head>
   <style>
      h1 {
         visibility: visible;
      }
      p {
         visibility: hidden;
      }
   </style>
</head>
<body>
   <h1>Demo Heading</h1>
   <p>This is set hidden</p>
</body>
</html>

Hide an Element

The CSS Visibility hidden is used to hide an element. Let us see an example to hide an element on a web page −

Example

<!DOCTYPE html>
<html>
<head>
   <title>CSS Visibility hidden</title>
   <style>
      form {
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      * {
         padding: 2px;
         margin:5px;
         box-sizing: border-box;
      }
      input[type="button"] {
         border-radius: 10px;
      }
      .child{
         display: inline-block;
         height: 40px;
         width: 40px;
         color: white;
         border: 4px solid black;
      }
      .child:nth-of-type(1){
         background-color: #FF8A00;
      }
      .child:nth-of-type(2){
         background-color: #F44336;
      }
      .child:nth-of-type(3){
         background-color: #C303C3;
      }
      .child:nth-of-type(4){
         background-color: #4CAF50;
      }
      .child:nth-of-type(5){
         background-color: #03A9F4;
      }
      .child:nth-of-type(6){
         background-color: #FEDC11;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Visibility-hidden</legend>
         <div id="container">
            <div class="child"></div><div class="child primary"></div><div class="child"></div><div class="child"></div><div class="child primary"></div><div class="child primary"></div>
         </div><br>
         <input type="button" value="Hide Primary Colors" onclick="visibilityHidden()">
      </fieldset>
   </form>
   <script>
      var primaryColor = document.getElementsByClassName('primary');
      function visibilityHidden(){
         for(var i=0; i<3; i++)
         primaryColor[i].style.visibility = 'hidden';
      }
   </script>
</body>
</html>

Visibility in a Table

Let's see an example of CSS Visibility property with the value collapse. It is used only for table rows (<tr>), row groups (<tbody>), columns (<col>), column groups (<colgroup>). This value removes a row or column, and space taken up by the row or column will be available for other content If used on other elements, it renders as ?hidden'

Example

Let us see an example −

<!DOCTYPE html>
<html>
<head>
   <title>CSS Visibility collapse</title>
   <style>
      form ,table{
         width:70%;
         margin: 0 auto;
         text-align: center;
      }
      table, th, td {
         border-collapse: collapse;
         border: 1px solid black;
      }	
      thead {
         background-color: goldenrod;
      }
      tbody{
         background-color: khaki;
      }
      tr:nth-of-type(3){
         visibility: collapse;
      }
   </style>
</head>
<body>
   <form>
      <fieldset>
         <legend>CSS-Visibility-collapse</legend>
         <table>
            <thead>
               <tr><th>Name</th><th>Course</th></tr>
            </thead>
            <tbody>
               <tr><td>Joana</td><td>MBA</td></tr>
               <tr><td>Smith</td><td>B.Arc</td></tr>
               <tr><td>Xersus</td><td>M.Sc</td></tr>
            </tbody>
         </table>
      </fieldset>
   </form>
</body>
</html>
Updated on: 2023-10-30T14:12:27+05:30

494 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements