Le Tutoriel de visibility

CSS Visibility
CSS {visibility:hidden}
CSS {visibility:collapse}

1. CSS Visibility

CSS Visibility permet de masquer ou d'afficher un élément sans modifier la mise en page (Layout) du document. Il peut également masquer une ligne (row) ou un groupe de lignes (row group), ou une colonne (column) ou un groupe de colonnes (column group) d'une table.

/* Example: */ 
visibility: visible|hidden|collapse|initial|inherit;

Les valeurs possibles de CSS Visibility :

Valeur	Description
visible	(Par défaut), Les éléments " visibles " sont par défaut.
hidden	Rendre un élément invisible, mais il prend quand même de la place.
collapse	Cette valeur n'est utilisée que pour les éléments <thead>, <tbody>, <tfoot>, <tr>, <col>, <colgroup> (d'un tableau) pour masquer cet élément, et libérer l'espace occupé par celui-ci. Si vous utilisez cette valeur pour d'autres éléments, elle fonctionnera de la même manière que la valeur "hidden".
initial	Définirr cette propriété (property) à sa valeur par défaut.
inherit	Sa valeur sera héritée de l'élément parent.

CSS {display:none} cache également un élément, mais il libère l'espace qu'il occupe, ce qui lui permet de modifier la mise en page du document.
Le Tutoriel de CSS Display

2. CSS {visibility:hidden}

CSS {visibility:hidden} rend un élément invisible, mais il ne libère pas l'espace qu'il occupe, donc il ne change pas la disposition du document.

visibility-hidden-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {visibility:hidden}</title>
      <meta charset="UTF-8"/>
      <script>
          function showHideImage(event)  {
             var myImage = document.getElementById("myImage");
             var visibilityValue = myImage.style.visibility;
             if(visibilityValue !== "hidden") {
                 myImage.style.visibility = "hidden";
             } else {
                 myImage.style.visibility = "visible";
             }
          }
      </script>
   </head>
   <body>
       <h2>CSS {visibility:hidden}</h2>
       <button onClick="showHideImage(event)">Show/Hide Image</button>
       <div style="padding:5px; margin-top:10px; background:#eee;">
           <img src="../images/flower.png" id= "myImage"/>
           Apollo 11 was the spaceflight that landed the first humans,
           Americans Neil Armstrong and Buzz Aldrin,
           on the Moon on July 20, 1969, at 20:18 UTC.
           Armstrong became the first to step onto the lunar
           surface 6 hours later on July 21 at 02:56 UTC.
       </div>
   </body>
</html>

3. CSS {visibility:collapse}

CSS {visibility:collapse} n'est utilisé que pour un seul des éléments <thead>, <tbody>, <tfoot>, <tr>, <col>, <colgroup> (d'un tableau) pour masquer cet élément, et libérer l'espace occupé par celui-ci. Si vous utilisez cette valeur pour d'autres éléments, elle fonctionnera de la même manière que la valeur "hidden".

CSS {visibility: hidden | collapse} fonctionne bien avec les lignes (Row) et les groupes de lignes (Row group) d'une table, en particulier, les éléments <thead>, <tbody>, <tfoot>, <tr>.

visibility-collapse-row-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {visibility:collapse}</title>
      <meta charset="UTF-8"/>
      <style>
         table {
            border: 1px solid;
            margin-top: 10px;
         }
         th, td {
            border: 1px solid;
            padding: 5px;
         }
         #myRow {
            background: lightgreen;
         }
      </style>
      <script>
          function setVisibilityValue(newValue)  {
             var myRow = document.getElementById("myRow");
             myRow.style.visibility = newValue;
             var myNote = document.getElementById("myNote");
             myNote.innerHTML = "{visibility: " + newValue+"}";
          }
      </script>
   </head>
   <body>
       <h2>CSS {visibility:visible | hidden | collapse}</h2>
       <button onClick="setVisibilityValue('visible')">Visible</button>
       <button onClick="setVisibilityValue('hidden')">Hidden</button>
       <button onClick="setVisibilityValue('collapse')">Collapse</button>
        <p style="color:blue;">
           Works for elements: TR, THEAD, TBODY, TFOOT.
        </p>
       <p id="myNote" style="color:red; font-style:italic;">
           {visibility:visible}
       </p>
       <table>
          <thead>
              <tr>
                  <th>No</th>
                  <th>First Name</th>
                  <th>Last Name</th>
                </tr>
            </thead>
            <tbody>
              <tr id="myRow">
                  <td>1</td>
                  <td>Hillary</td>
                  <td>Clinton</td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>Donald</td>
                    <td>Trump</td>
                  </tr>
            </tbody>
       </table>
   </body>
</html>

CSS {visibility: collapse} peut bien fonctionner avec les colonnes (Column) et les groupes de colonnes (Column group) d'un tableau dans certains navigateurs. Les autres valeurs seront ignorées, ou traitées comme {visibility: visible}.

<col>, <colgroup>	CSS {visibility:hidden}	CSS {visibility:collapse}
Firefox
Chrome

visibility-collapse-col-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {visibility:collapse}</title>
      <meta charset="UTF-8"/>
      <style>
         table {
            border: 1px solid;
            margin-top: 10px;
         }
         th, td {
            border: 1px solid;
            padding: 5px;
         }
      </style>
      <script>
          function setVisibilityValue(newValue)  {
             var myColGroup = document.getElementById("myColGroup");
             myColGroup.style.visibility = newValue;
             var myNote = document.getElementById("myNote");
             myNote.innerHTML = "{visibility: " + newValue+"}";
          }
      </script>
   </head>
   <body>
       <h2>CSS {visibility:visible | hidden | collapse}</h2>
       <button onClick="setVisibilityValue('visible')">Visible</button>
       <button onClick="setVisibilityValue('hidden')">Hidden</button>
       <button onClick="setVisibilityValue('collapse')">Collapse</button>

       <h3>COL, COLGROUP Elements</h3>
       <p id="myNote" style="color:red; font-style:italic;">
           {visibility:visible}
       </p>
       <table>
        <colgroup>
          <col style="background-color:lightgreen">
        </colgroup>
        <colgroup id="myColGroup">
          <col span="2" style="background-color:red">
          <col style="background-color:yellow">
        </colgroup>
        <tr>
          <th>No</th>
          <th>ISBN</th>
          <th>Title</th>
          <th>Price</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>1</td>
          <td>3476896</td>
          <td>My first HTML</td>
          <td>$53</td>
          <td>..</td>
        </tr>
        <tr>
          <td>2</td>
          <td>5869207</td>
          <td>My first CSS</td>
          <td>$49</td>
          <td>..</td>
        </tr>
      </table>
     <p style="color:red;">
        CSS {visibility:collapse} works with COL, COLGROUP elements in Firefox (Not Chrome).<br/>
        CSS {visibility:hidden} does not work  with COL, COLGROUP elements in Firefox and Chrome.
     </p>
   </body>
</html>

Le Tutoriel de HTML Col, Colgroup

Show/Hide Columns?

Si vous voulez masquer une ou plusieurs colonnes d'un tableau, il est préférable de masquer toutes les cellules de ces colonnes, qui sont supportées par tous les navigateurs.

hide-table-col-example.html

<!DOCTYPE html>
<html>
   <head>
      <title>CSS {visibility:collapse}</title>
      <meta charset="UTF-8"/>
      <style>
         table {
            border: 1px solid;
            margin-top: 10px;
         }
         th, td {
            border: 1px solid;
            padding: 5px;
         }
         .my-cell {
           background-color: lightgreen;
         }
         .cell-hide {
            display: none;
         }
      </style>
      <script src="hide-table-col-example.js"></script>
   </head>
   <body>
       <h2>Show/Hide Table Columns</h2>
       <button onClick="showOrHideCells(false)">Hide</button>
       <button onClick="showOrHideCells(true)">Show</button> 
       <table>
        <tr>
          <th>No</th>
          <th class="my-cell">ISBN</th>
          <th>Title</th>
          <th>Price</th>
          <th>Description</th>
        </tr>
        <tr>
          <td>1</td>
          <td class="my-cell">3476896</td>
          <td>My first HTML</td>
          <td>$53</td>
          <td>..</td>
        </tr>
        <tr>
          <td>2</td>
          <td class="my-cell">5869207</td>
          <td>My first CSS</td>
          <td>$49</td>
          <td>..</td>
        </tr>
      </table>
   </body>
</html>

hide-table-col-example.js

function showOrHideCells(show)  {  
    var elements = document.getElementsByClassName("my-cell");
    var copiedElements = [... elements];

    for(var i=0; i< copiedElements.length; i++) {
        if(show) {
            copiedElements[i].classList.remove("cell-hide");
        } else {
            copiedElements[i].classList.add("cell-hide");
        }
    }
}

L'exemple ci-dessous est un exemple plus complexe fourni par la communauté, cachant / montrant une colonne de tableau :

https://jsfiddle.net/KyleMit/rr96p4vv/

Le Tutoriel de visibility

1. CSS Visibility

2. CSS {visibility:hidden}

3. CSS {visibility:collapse}

Tutoriels CSS

Tutoriels CSS

Articles les plus récents