Скрыть содержимое div с помощью сss

138

15 января 2021, 07:20

Всем привет. Есть див с содержимым интересует как его скрыть с помощью сss по клику на кнопку

Answer 1

В CSS можно танцевать только за счет чекбоксов и радио-кнопок. Есть селектор .elem:checked, позволяющий находить отмеченные чекбоксы. А еще есть HTML-тег <label>, который умеет при клике переключать эти чекбоксы (и может имитировать кнопку).

Плюс, CSS-селектор .bubu ~ .kuku находит все элементы с классом .kuku, которые находятся где-то ниже в коде от .bubu, при этом они оба должны быть одинакового "уровня" - т.е. не обернуты в дополнительные теги.

Поэтому пример: При клике на label, невидимый чекбокс отмечается,
а к его отметке привязан стиль для .bubu #hide:checked ~ .bubu {display: none;}
( i ) через . тыкают на класс, а через # - id.

.btn { 
  display: block; 
  width: 150px; padding: 2px; 
  font-size: 20px; text-align: center; 
  border: 2px solid orange; 
  cursor: pointer; user-select: none; 
} 
 
#hide {display: none;} 
#hide:checked ~ .bubu {display: none;} 
 
.bubu {margin: 10px;}

<label for="hide" class="btn">Кнопка</label> 
 
<input id="hide" type="checkbox"> 
<div class="bubu">Какое-то содержание...</div> 
<div class="bubu">Другое содержание...</div>

Но такой код при повторном клике - опять покажет текст. Если нужно его убрать навсегда, можно использовать одну радио-кнопку:

.btn { 
  display: inline-block; 
  width: 150px; padding: 2px; 
  font-size: 20px; text-align: center; 
  border: 2px solid orange; 
  cursor: pointer; user-select: none; 
} 
 
/* #hide-1, #hide-2 {display: none;} */ 
 
#hide-1:checked ~ .bubu {display: none;} 
#hide-2:checked ~ .bubu {display: none;} 
 
.bubu {margin: 10px;}

<label for="hide-1" class="btn">Кнопка-1</label> 
<label for="hide-2" class="btn">Кнопка-2</label> 
 
<div> 
  <input id="hide-1" type="radio" name="hide-1"> 
  <div class="bubu">Какое-то содержание...1111</div> 
  <div class="bubu">Другое содержание...1111</div> 
</div> 
 
<div> 
  <input id="hide-2" type="radio" name="hide-2"> 
  <div class="bubu">Какое-то содержание...2222</div> 
  <div class="bubu">Другое содержание...2222</div> 
</div>

Невидимость радио убрал, чтобы было видно, что происходит. В этом случае завернул их в дополнительные блоки, чтобы #hide1 ~ .bubu не цеплял блоки, предназначенные для hide-2

За счет ~ разметка может быть чуть более свободной.
Если блок с "содержимым" точно один, и точно потом не забудете, почему там стоит этот чекбокс, можно использовать селектор .bubu + .kuku, который выделяет .kuku, находящийся непосредственно после .bubu, и между ними больше ничего не должно стоять:

#hide {display: none;} 
#hide:checked + .bubu {display: none;} 
 
.bubu {margin: 10px;} 
 
.btn { 
  display: block; 
  width: 150px; padding: 2px; 
  font-size: 20px; text-align: center; 
  border: 2px solid orange; 
  cursor: pointer; user-select: none; 
}

<label for="hide" class="btn">Кнопка</label> 
 
<input id="hide" type="checkbox"> 
<div class="bubu">Какое-то содержание...</div> 
 
<div class="bubu">А это уже не скроется...</div>