На чистых стилях красивее можно сделать.Где еще идет настройка, как на заголовок и обвод, где идет описание.
Код
<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь</label>
<div>Когда AMD запустила Vega , один из аргументов, который он сделал, - архитектура будет иметь сильные ноги и окажется хорошо сбалансированной в будущих рабочих нагрузках. Очевидно, что одно название не собирается доказывать эту теорию так или иначе, но хорошо видеть, что Вега сильно ударяет по воротам. Общее энергопотребление по-прежнему благоприятствует Nvidia, но настольные геймеры склонны рассматривать шум как грубый прокси-сервер для энергопотребления, то есть, хотя есть определенные покупатели, которые заботятся обо всех, большинство клиентов сначала предпочитают тихие карточки, а карты с более низкой мощностью второй.</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;
}
Демонстрация:
