Раскрытие текста при нажатии на ссылку
Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
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>
Способ универсальный, работает во всех браузерах. Внутри раскрывающегося блока может находиться любой контент с любыми тегами и изображениями. Количество блоков тоже ничем не ограничивается, они просто должны иметь уникальные идентификаторы. Можно немного усовершенствовать скрипт, чтобы находить нужный текстовый блок через свойства parentNode и previousSibling и отказаться от использования идентификаторов. Здесь вы можете посмотреть готовую страницу с раскрывающимися текстовыми блоками.
Просмотров: 8902 | Комментариев: 9
Внимание! Статья опубликована больше года назад, информация могла устареть!
Комментарии
Отзывы посетителей сайта о статье
Владислав
(23.08.2022 в 19:51):
Спасибо, товарищ!
Благодаря этой статье написал вот эту вот страницу https://uqix.ru/ut/reg/ теперь все кому нужно могут открыть и прочитать :)
Благодаря этой статье написал вот эту вот страницу 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;"> - это что означает?
СПАСИБО! Неожиданно и тем более приятно!
Чтобы окончательно добить вопрос: "...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" и т.д.
Добавить комментарий
Заполните форму для добавления комментария
Материалы, опубликованные на этом сайте, не рекомендуются к просмотру лицам в возрасте до 16 лет без присутствия взрослых.
Вам помог этот сайт?
Поблагодарили 33,211 раз
Поблагодарили 33,211 раз
 |
2023 - ОКТЯБРЬ |  |
||||
| Пн | Вт | Ср | Чт | Пт | Сб | Вс |
| 1 | ||||||
| 2 | 3 | 4 | 5 | 6 | 7 | 8 |
| 9 | 10 | 11 | 12 | 13 | 14 | 15 |
| 16 | 17 | 18 | 19 | 20 | 21 | 22 |
| 23 | 24 | 25 | 26 | 27 | 28 | 29 |
| 30 | 31 | |||||
День учителя
День Сухопутных войск России
День пожилых людей
Всемирный день вегетарианства
Буду очень благодарен, если размеcтите мою кнопочку:
 |
Яндекс ИКС: 400 |
 |
 |
Ну тут не знаю что сказать. Мне 16 лет. Держу на себе один сайт и мне как-бы нравится такая практика. Хотя я совсем не программист :)