О чём говорим..

Как спрятать часть текста и открыть его при клике на ссылку с помощью CSS

cloud

Раскрывающиеся блоки как оказалось это довольно таки легко.

Не буду ничего подробно объяснять, просто покажу.
Собственно прятать можно все что угодно, а не только текст. И всё это чудо без всяких там скриптов. Правда на сколько эта штука уживается с разными браузерами я еще не проверял. Буду надеяться на лучшее, ибо начал уже использовать эту плюшку я..

Что мы делаем на самой странице: 

<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

Комментировать

E-mail не обязателен, но желательно его всё же указать, чтобы иметь возможность подписаться на уведомления о новых комментариях. А лучше - просто зарегистрироваться и всегда писать от своего имени.

Защитный код
Обновить