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

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

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

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

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

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

Читать далее на CSS

2 декабря 2015 CSS

Если Вам нужно скрыть длинный блок, а при нажатии на кнопку показать, это решение для Вас.

Недостатком данного метода является то, что внутрь текста нельзя вставлять DIV. Если вам нужно обавлять внутрь текста DIV, используйте метод с JS. Подробнее здесь.

2015-12-02_185538

HTML

[php]
<div>
<input type="checkbox" class="read-more-state" id="post-1" />
<p class="read-more-wrap">Lorem ipsum dolor sit amet, consectetur adipisicing elit. <span class="read-more-target">Libero fuga facilis vel consectetur quos sapiente deleniti eveniet dolores tempore eos deserunt officia quis ab? Excepturi vero tempore minus beatae voluptatem!</span></p>
<label for="post-1" class="read-more-trigger"></label>
</div>
<div>
<input type="checkbox" class="read-more-state" id="post-2" />
<ul class="read-more-wrap">
<li>lorem</li>
<li>lorem 2</li>
<li class="read-more-target">lorem 3</li>
<li class="read-more-target">lorem 4</li>
</ul>
<label for="post-2" class="read-more-trigger"></label>
</div>
[/php]

CSS

[php]

.read-more-state {
display: none;
}

.read-more-target {
opacity: 0;
max-height: 0;
font-size: 0;
transition: .25s ease;
}

.read-more-state:checked ~ .read-more-wrap .read-more-target {
opacity: 1;
font-size: inherit;
max-height: 999em;
}

.read-more-state ~ .read-more-trigger:before {
content: ‘Show more’;
}

.read-more-state:checked ~ .read-more-trigger:before {
content: ‘Show less’;
}

.read-more-trigger {
cursor: pointer;
display: inline-block;
padding: 0 .5em;
color: #666;
font-size: .9em;
line-height: 2;
border: 1px solid #ddd;
border-radius: .25em;
}

[/php]

Пример 2

2015-12-02_185807

В данном примере отсутствует кнопка скрыть, но текст исчезает постепенно.

HTML

[php]

<div class="sidebar-box">
<p>malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo.</p>
<p class="read-more"><a href="#" class="button">Read More</a></p>
</div>

[/php]

CSS

[php]

.sidebar-box {
max-height: 120px;
position: relative;
overflow: hidden;
}
.sidebar-box .read-more {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
text-align: center;
margin: 0; padding: 30px 0;

/* "transparent" only works here because == rgba(0,0,0,0) */
background-image: linear-gradient(to bottom, transparent, black);
}

[/php]

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Сообщение

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