Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Code (HTML) : Убрать нумерацию
- <div class="textbox" id="mytext">
- Тут находится большой текст, который мы должны показать при нажатии на ссылку
- </div>
- <div>
- <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
- return false;">Посмотреть весь текст</a>
- </div>
Code: Убрать нумерацию
- <style type="text/css">
- .textbox {
- overflow: hidden;
- height: 100px;
- border: 1px dashed #A0A0A0;
- }
- .opened {
- overflow: auto;
- height: auto;
- }
- .opened+div {
- display: none;
- }
- </style>
Читать статью целиком »
Просмотров: 10285 | Комментариев: 9