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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Время чтения: 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 минут и отвечу на все Ваши вопросы.

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

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

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

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

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

или позвоните мне по телефону
+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"]
Спасибо за оставленную заявку
Ожидайте звонка
Заказ СЕО продвижения
Введите ваше имя и телефон.
Я лично свяжусь с Вами для обсуждения деталей.

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

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

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

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

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Заказ тарифа начинающий
Введите ваше имя и телефон.
Я лично свяжусь с Вами для начала обучения.

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

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

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

Спасибо за оставленную заявку
Ожидайте звонка
Заказать услугу
В течении 15 минут я рассчитаю точную стоимость и сроки и отпишусь Вам.

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

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

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

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

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

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

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

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

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

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

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

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

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

Прикрепите файл

Сообщение *

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

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

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

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

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

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

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

Комментарий

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

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

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

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