
Раскрывающиеся блоки как оказалось это довольно таки легко.
Не буду ничего подробно объяснять, просто покажу.
Собственно прятать можно все что угодно,
а не только текст. И всё это чудо без всяких там скриптов. Правда на сколько эта штука уживается с разными браузерами я еще не проверял.
Буду надеяться на лучшее, ибо начал уже использовать эту плюшку я..
Что мы делаем на самой странице:
<div class="skblok"> <input class="hide" id="hd-1" type="checkbox"> <label for="hd-1"> <ul> <li> Открыть. <li> Закрыть. </ul> </label> <div> Тут размещается скрытый блок. </div> <br/> <input class="hide" id="hd-2" type="checkbox"> <label for="hd-2"> <ul> <li> Посмотреть что скрыто. <li> Посмотрел. Можно убирать. </ul> </label> <div> Второй скрытый блок. </div> </div>
Теперь делаем правила, чтобы всё это чудо начало работать:
/* контейнер */ .skblok { max-width: 100%; padding: 0 10px; margin: 5px; } /* скрываем чекбоксы и блоки с содержанием */ .hide, .hide + label ~ div { display: none; } /* вид текста label */ .hide + label { margin: 0; padding: 0; color: #c07f57; cursor: pointer; display: flex; align-items: flex-start; max-height: 20px; overflow: hidden; } /* вид текста label при активном переключателе */ .hide:checked + label { color: #8a99be; border-bottom: 0; } .hide + label ul { list-style-type: none; margin:0; padding: 0; transform: translateY(0); transition: 300ms; } .hide + label ul li { margin-bottom: 5px; } .hide:checked + label ul { transform: translateY(-50%); transition: 300ms; } /* когда чекбокс активен показываем блоки с содержанием */ .hide:checked + label + div { display: block; -moz-box-shadow: inset 0px 0px 34px 1px rgba(125, 142, 150, 0.72); -webkit-box-shadow: inset 0px 0px 34px 1px rgba(125, 142, 150, 0.72); box-shadow: inset 0px 0px 34px 1px rgba(125, 142, 150, 0.72); margin-left: 20px; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; padding: 10px; /* чуточку анимации при появлении */ -webkit-animation:fade ease-in 0.5s; -moz-animation:fade ease-in 0.5s; animation:fade ease-in 0.5s; } /* анимация при появлении скрытых блоков */ @-moz-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @-webkit-keyframes fade { from { opacity: 0; } to { opacity: 1 } } @keyframes fade { from { opacity: 0; } to { opacity: 1 } } .hide + label:before { background-color: rgba(183, 103, 51, 0.45); color: #fff; content: "\002B"; display: block; float: left; font-size: 15px; font-weight: bold; height: 16px; line-height: 16px; margin: 1px 5px; text-align: center; width: 16px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; } .hide:checked + label:before { content: "\2212"; background-color: rgba(138, 153, 190, 0.66); }
Проверяем что получилось. А получится как раз то, что есть сейчас на странице. Таким чудесным способом тут прячутся кодики.
Спасибо н-ннада говорить вот сюда - dbmast.ru
Подробнее...