JSFiddle - React, Tailwind, and code Playground

by Kocsten

HTML

<p><div align="center"><img border="0" align="absmiddle" src="http://zornet.ru/ZORNET/drental/OohSq3Z.png"></div>


<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">ZORNET.RU</label>
<div>Microsoft анонсировала более 100 наименований, которые будут поддерживать Xbox One X, но, потратив 500 долларов на новую консоль, заплатив 60 долларов за поп для совершенно новых игр. К счастью, множество существующих игр получают исправление для хорошего разрешения.</div>

CSS

/* скрываем чекбоксы и блоки с содержанием */
.hide, .hide + label ~ div {
    display: none; 
}
/* вид текста label */
.hide + label,
.hide:checked + label {
    padding: 0;
    color: green;
    cursor: pointer;
    border-bottom: 1px dotted green;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px; 
}