Приветствую всех читателей блога! В этой небольшой статье я вам расскажу об атрибуте hidden который был внедрен с приходом html5. Поехали!

Следует сразу уяснить что этот атрибут поддерживается не во всех браузерах, а именно на данный момент в Safari, Android и iOS поддержки нет. Впрочем вы всегда можете это проверить самостоятельно.

Переходим к рассмотрению, создадим обычный блок с текстом и зададим ему атрибут hidden.

<div hidden >Number 2</div>

В результате блока с текстом мы так и не увидим, потому что атрибут hidden отвечает за скрытие элемента. По сути наличие атрибута hidden эквивалентно наличию свойства 'display:none;', то есть элемент полностью скрыт.

Еще возможны другие виды записей.

<div hidden="hidden" >Number 2</div>

и

<div hidden="true" >Number 2</div>

В последнем случае вместо значения true можно указать все что угодно, к примеру false.

<div hidden="false" >Number 2</div>

Атрибут все равно выполняет свою работу, скрывает элемент.

Теперь поговорим о активации и деактивации атрибута через javascript.

<div class="div" hidden >Number 2</div>
<script>
  console.log(document.querySelector('.div').hidden); //true
</script>

Здесь в консоль браузера выводится текущее состояние атрибута hidden - true, что означает что он активирован.

Если мы уберем атрибут hidden у элемента.

<div class="div" >Number 2</div>
<script>
  console.log(document.querySelector('.div').hidden);
</script>

В консоль выведется значение false, это изначальное состояние атрибута hidden.

Состояние можно менять, просто переопределяя его.

<div class="div" >Number 2</div>
<script>
  document.querySelector('.div').hidden = true;
</script>

Здесь элемент будет скрыт.

<div class="div" hidden>Number 2</div>
<script>
  document.querySelector('.div').hidden = false;
</script>

А здесь отображен.

Используя атрибут hidden можно написать механизм отображения и скрытия элементов.

<button>Отобразить</button>
<div class="div" hidden>Блок с элементами</div>
<script>
  document.querySelector('button').addEventListener('click', function(){
    if(document.querySelector('.div').hidden === true){
      this.innerText = 'Скрыть';
      document.querySelector('.div').hidden = false;
    }else{
      this.innerText = 'Отобразить';
      document.querySelector('.div').hidden = true;
    }
  });
</script>

или так

<button>Отобразить</button>
<div class="div" hidden>Блок с элементами</div>

<script>
  document.querySelector('button').addEventListener('click', function(){
    if(document.querySelector('.div[hidden]') !== null){
      this.innerText = 'Скрыть';
      document.querySelector('.div').removeAttribute('hidden');
    }else{
      this.innerText = 'Отобразить';
      document.querySelector('.div').setAttribute('hidden', 'hidden');
    }
  });
</script>

Вот в принципе все что вы должны знать про атрибут hidden. Надеюсь статья оказалась для вас познавательной и вы смогли расширить свой кругозор.

На этом у меня все. Подписывайтесь в группу Вконтакте и переходите на мой канал Youtube.

Здоровья вам и удачи!