Cкрыть или отобразить элемент

С помощью свойства visibility можно скрыть или отобразить любой элемент HTML-страницы. Особенностью этого свойства, является то, что когда объект становится невидимым его место остаётся за ним и не оказывает возможного влияния на другие элементы.

Стоит отметить, что скрыть элемент можно так же с помощью свойства display, применив к нему параметр none, однако в этом случае исчезнет как само его изображение, так и его габаритные параметры, а взаимодействующие с ним элементы могут сместиться.


visibility : visible;
visibility : hidden;
visibility : collapse;

visible – параметр задающий видимость элемента.

hidden – параметр убирающий видимость объекта или другими словами делающий его полностью прозрачным.

collapse – параметр действует для всех элементов как hidden, а для содержимого ячеек таблиц, как display: none.

На изображении, которое расположено ниже, слева видны три блока обозначенные цифрами 1, 2, 3, фон которых к тому же имеет разные цвета. В колонке посередине отсутствует блок номер два, так как нему применено свойство visibility: hidden. В правой колонке подобному блоку задано свойство display: none, в результате чего он стал не видимым, а блок номер три занял его место.


HTML

<div class="three-columns">

  <div class="column">
    <div class="box red">
      1
    </div>
    <div class="box yellow">
      2
    </div>
    <div class="box green">
      3
    </div>
  </div>
  
  <div class="column">
    <div class="box red">
      1
    </div>
    <div class="box yellow invisible">
      2
    </div>
    <div class="box green">
      3
    </div>
  </div>
  
  <div class="column">
    <div class="box red">
      1
    </div>
    <div class="box yellow display-none">
      2
    </div>
    <div class="box green">
      3
    </div>
  </div>
  
</div>


CSS

.three-columns{
    overflow: hidden;
}
.three-columns .column {
    width: 30%;
    float: left;
    padding-right: 1.6%;
    padding-left: 1.6%;	
    padding-top: 10px;
    padding-bottom: 10px;
}
.box{
    width: 80px;
    font-size: 24px;
    font-weight: bold;
    line-height: 80px;
    margin: 40px auto;
    text-align: center;
}
.red{
    background-color: #ee1d22;
}
.green{
    background-color: #02a64f;
}
.yellow{
    background-color: #fdce36;
}
.invisible {
    visibility: hidden;
}
.display-none {
    display: none;
}

На следующем примере свойство visibility, которому задан параметр collapse убирает полностью строку, начинающуюся с детали под номером 002.


HTML

<div class="two-columns">

 <div class="columns">
 
    <table class="example">
      <tr>
        <th>Наименование</th>
        <th>Цена</th>
      </tr>
      <tr>
        <td>Деталь 001</td>
        <td>45р.</td>
      </tr>
      <tr>
        <td>Деталь 002</td>
        <td>125р.</td>
      </tr>
      <tr>
        <td>Деталь 003</td>
        <td>348р.</td>
      </tr>
    </table>
    
  </div>
  
  <div class="columns">
  
    <table class="example">
      <tr>
        <th>Наименование</th>
        <th>Цена</th>
      </tr>
      <tr>
        <td>Деталь 001</td>
        <td>45р.</td>
      </tr>
      <tr class="collapse">
        <td>Деталь 002</td>
        <td>125р.</td>
      </tr>
      <tr>
        <td>Деталь 003</td>
        <td>348р.</td>
      </tr>
    </table>
    
  </div>
  
</div>


CSS

.two-columns{
    overflow: hidden;
    margin: 0px auto;
    max-width: 500px;
}
.two-columns .columns {
    width: 50%;
    float: left;
}
.example {
    margin: 40px auto;
    border-collapse: collapse;
}
.example th,
.example td{
    padding: 4px 10px;
    border: 1px solid #000;	
}
.example th{
    color: #fff;
    font-weight: normal;
    background-color: #575757;
}
.example tr.collapse {
    visibility: collapse;
}