Время чтения: 1 мин. 9 декабря 2015 в 10:46 CSS
Звёзд: 1Звёзд: 2Звёзд: 3Звёзд: 4Звёзд: 5
Загрузка...

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

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

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

Пример:

2015-12-09_114739

[php]

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

[/php]

[php]

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

/* скрываем чекбоксы и блоки с содержанием */
.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%);
}

[/php]

Похожие статьи

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

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

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

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

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Получить консультацию

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

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

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

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

Комментарий

Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
[contact-form-7 404 "Not Found"]
Начать сотрудничество
Заполните поля ниже. Я лично перезвоню Вам в течении 15 минут для обсуждения деталей.

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

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

Введите контактный Email для отправки точной стоимости

или позвоните мне по телефону
+7-499-70-300-44
Получить консультацию

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

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

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

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

Комментарий

[contact-form-7 404 "Not Found"]
Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Получить коммерческое предложение

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

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

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

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

Какая услуга Вас интересует? *

Допонительные услуги

Комментарий

Заказать услугу
Я свяжусь с Вами в течении 15 минут в рабочее время для обсуждения деталей

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

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

Комментарий

Запись на бесплатный урок
Введите ваше имя, телефон и Skype логин и email.
Я свяжусь с Вами для уточнения времени прохождения урока.

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

Введите ваше Skype логин *

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

Выберите программу

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

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

Сообщение

Заказать сайт
Первые 14 дней бесплатно. Оставьте номер email и контактный телефон. Я лично перезвоню Вам в течении 10 минут, для обсуждения деталей.


Ваш email

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

Комментарий или вопрос