Blog. Just Blog

Раскрытие текста при нажатии на ссылку

Версия для печати Добавить в Избранное Отправить на E-Mail | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.

Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
  1. <div class="textbox" id="mytext">
  2. Тут находится большой тексткоторый мы должны показать при нажатии на ссылку
  3. </div>
  4. <div>
  5.     <a href="#" onclick="document.getElementById('mytext').classList.add('opened');
  6.     return false;">Посмотреть весь текст</a>
  7. </div>
Что происходит при нажатии на ссылку? Блоку текста просто добавляется класс "opened". И да, это не обязательно должна быть именно ссылка, а любой HTML-элемент, который может обработать событие onclick. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
  1. <style type="text/css">
  2. .textbox {
  3.     overflowhidden;
  4.     height100px;
  5.     border1px dashed #A0A0A0;
  6. }
  7. .opened {
  8.     overflowauto;
  9.     heightauto;
  10. }
  11. .opened+div {
  12.     displaynone;
  13. }
  14. </style>
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.

Способ универсальный, работает во всех браузерах. Внутри раскрывающегося блока может находиться любой контент с любыми тегами и изображениями. Количество блоков тоже ничем не ограничивается, они просто должны иметь уникальные идентификаторы. Можно немного усовершенствовать скрипт, чтобы находить нужный текстовый блок через свойства parentNode и previousSibling и отказаться от использования идентификаторов. Здесь вы можете посмотреть готовую страницу с раскрывающимися текстовыми блоками.

Поделиться ссылкой ВКонтакте Поделиться ссылкой на Facebook Поделиться ссылкой на LiveJournal Поделиться ссылкой в Мой Круг Добавить в Мой мир Добавить на ЛиРу (Liveinternet) Добавить в закладки Memori Добавить в закладки Google
Просмотров: 8902 | Комментариев: 9

Внимание! Статья опубликована больше года назад, информация могла устареть!

Комментарии

Отзывы посетителей сайта о статье
Владислав (23.08.2022 в 20:24):
u-b0at,
ЦитатаВ 00-е гг это было повсеместной практикой, а сейчас почему-то нет

Ну тут не знаю что сказать. Мне 16 лет. Держу на себе один сайт и мне как-бы нравится такая практика. Хотя я совсем не программист :)
Владислав (23.08.2022 в 19:51):
Спасибо, товарищ!
Благодаря этой статье написал вот эту вот страницу https://uqix.ru/ut/reg/ теперь все кому нужно могут открыть и прочитать :)
ManHunter (19.08.2020 в 20:25):
Очевидно же, что надо исправить! То, что сделано неправильно, надо сделать правильно! Какой вопрос, такой и ответ! Я же телепат, знаю ответ на любой вопрос!
Вадим (19.08.2020 в 19:21):
Здравствуйте! На моём сайте почему сразу написан текст, который по идее должен раскрываться! Подскажите что сделать!
u-b0at (15.08.2019 в 21:19):
O.K.
Спасибо за подробный и обстоятельный ответ.
ManHunter (15.08.2019 в 17:54):
А это чтобы при клике на ссылку с пустым адресом href="#" не происходило перехода. Если return false не добавлять, то скрипт отработает как надо, но браузер при этом перемотает контент на начало страницы с якорем #. Проще самому попробовать, будет сразу понятно.
u-b0at (15.08.2019 в 17:50):
!!!WOW!!!
СПАСИБО! Неожиданно и тем более приятно!
Чтобы окончательно добить вопрос: "...return false;"> - это что означает?
ManHunter (15.08.2019 в 10:51):
Во множестве элементов, принадлежащих всей странице (document), найти элемент (getElementById) с идентификатором id="mytext" и в список его стилей (classList) добавить (add) новый класс "opened".
u-b0at (15.08.2019 в 07:08):
Спасибо, нужная штука. Вообще, я давно не встречал прописанные в теги JS-команды. В 00-е гг это было повсеместной практикой, а сейчас почему-то нет) Имею вопрос, можно ли объяснить каждую команду? "document", "add" и т.д.

Добавить комментарий

Заполните форму для добавления комментария
Имя*:
Текст комментария (не более 2000 символов)*:

*Все поля обязательны для заполнения.
Комментарии, содержащие рекламу, ненормативную лексику, оскорбления и т.п., а также флуд и сообщения не по теме, будут удаляться. Нарушителям может быть заблокирован доступ к сайту.
Наверх
Powered by PCL's Speckled Band Engine 0.2 RC3
© ManHunter / PCL, 2008-2023
При использовании материалов ссылка на сайт обязательна
Время генерации: 0.09 сек. / MySQL: 3 (0.0081 сек.) / Память: 4.5 Mb
Наверх