+7-499-70-300-44
заказать звонок
Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Спасибо за оставленную заявку
Ожидайте звонка

Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

CSS

В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени

блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.

Пример:

2015-12-09_114739


<div class="demo">
<input type="checkbox" id="hd-1" class="hide "/>
Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. Какой либо текст анонс.. 
<label for="hd-1" class="clear" >Читать далее</label>
<div>
любой скрытый контент...  любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент...  любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент...  любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... любой скрытый контент... 
</div>
</div>




/* скрытый текст возле подвала для сео */

/* скрываем чекбоксы и блоки с содержанием */
.hide, .hide + label ~ div {
display: none; 
}

/* вид текста label */
.hide + label,
.hide:checked + label {
    padding: 0;
    cursor: pointer;
}

/* вид текста label активном переключателе */
.hide:checked + label {
color: red;
border-bottom: 0;
display: none;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
display: block; 
}

/* demo контейнер */
.demo {
margin: 5% 10%;
line-height: 25px;
}

.hide + label:before {
    content: '';
    display: block;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    height: 4em;
    background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255, 255, 255, 0)), color-stop(100%, #fff));
    background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
    background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
    background: -ms-linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
    background: linear-gradient(top, rgba(255, 255, 255, 0) 0%, #fff 100%);
}

Другие статьи

Заказать обратный звонок

Я свяжусь с Вами в течении 10 минут и отвечу на все Ваши вопросы.

Введите ваше имя *

Введите контактный телефон *

Введите контактный e-mail *

Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для обсуждения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Введите адрес сайта, который нуждается в продвижении *

Указать точное время звонка

или позвоните нам по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Расчет стоимости
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей,
необходимых для расчета стоимости проекта.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
Спасибо за оставленную заявку
Ожидайте звонка
Хочу так же
Введите ваше имя и телефон.
Я лично перезвоню Вам для уточнения деталей.

Введите ваше имя *

Введите контактный телефон *

Указать точное время звонка

или позвоните мне по телефону
+7-499-70-300-44
[contact-form-7 404 "Not Found"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

Введите ваше имя *

Введите контактный телефон *

Введите ваш Скайп *

Спасибо за оставленную заявку
Ожидайте звонка