Как сделать в html раскрывающийся выпадающий текст при клике на ссылку
Раскрытие текста при нажатии на ссылку
13.08.2019 | Категория: Web-мастеру и не только | Автор: ManHunter
Раскрывающиеся блоки текста бывают очень удобны, когда требуется разместить на странице достаточно объемные текстовые и/или графические материалы второстепенной важности. Это могут быть какие-то пояснительные тексты к основному материалу, объемные цитаты и другая информация, которая может быть полезной для пользователя, но при этом не должна отвлекать от чтения. Сегодня я расскажу, как это можно сделать максимально просто с минимальным использованием скриптов и стилей.
Начнем с верстки. У нас есть блок текста, который будет раскрываться, и ссылка, при нажатии на которую это должно происходить. Все самое обычное, никаких нестандартных приемов верстки.
Что происходит при нажатии на ссылку? Блоку текста просто добавляется класс «opened». И да, это не обязательно должна быть именно ссылка, а любой HTML-элемент, который может обработать событие onclick. Теперь таблица стилей. Для удобства понимания я оставил только те параметры, которые относятся непосредственно к функционированию раскрываемых блоков.
- < style type = "text/css" >
- . textbox
- overflow : hidden ;
- height : 100px ;
- border : 1px dashed #A0A0A0;
- >
- . opened
- overflow : auto ;
- height : auto ;
- >
- . opened + div
- display : none ;
- >
Первоначально свернутый блок имеет высоту 100px, а свойство overflow: hidden не дает его содержимому выходить за эти размеры. При добавлении класса opened высота и перекрытие блока сбрасываются к дефолтным, в результате чего он раскрывается на всю высоту его содержимого. Последнее правило CSS скрывает уже ненужный блок со ссылкой.
Способ универсальный, работает во всех браузерах. Внутри раскрывающегося блока может находиться любой контент с любыми тегами и изображениями. Количество блоков тоже ничем не ограничивается, они просто должны иметь уникальные идентификаторы. Можно немного усовершенствовать скрипт, чтобы находить нужный текстовый блок через свойства parentNode и previousSibling и отказаться от использования идентификаторов. Здесь вы можете посмотреть готовую страницу с раскрывающимися текстовыми блоками.
Курсы javascript
Есть несколько div, при клике на которые разворачивается скрытый текст:
Спрятанный текстСпрятанный текстСпрятанный текст
$(document).ready(function()< $('.view-source .hide').hide(); $('.view-source a').toggle( function()< $(this).siblings('.hide').stop(false, true).slideDown(500); >, function() < $(this).siblings('.hide').stop(false, true).slideUp(500); >); >);
Как сделать так, чтобы развернутый div сворачивался при клике на любой из других div’ов — оберток (с классом view-source)? То есть, на один момент времени должен быть открыт только 1 скрытый div.
Как сделать выпадающий список HTML
В системе управления UralCMS реализовано множество различных функций для работы с содержимым разделов — тексты, изображения, ссылки, таблицы, выпадающие списки и так далее. Среди прочего, также доступен функционал для создания раскрывающегося блока в тексте раздела.
Раскрывающийся блок может содержать в себе любую информацию: список, текст, картинки, таблицы и так далее. Таким образом, воспользовавшись данным инструментом у Вас получиться оформить разделы более функционально и интересно.
Создание раскрывающегося блока, списка
Чтобы разместить в разделе раскрывающийся блок или список — перейдите в редактирование содержимого раздела, далее, разместите ту информацию (блоки, списки, таблицы, ссылки и т.д.), которая будет раскрываться по специальной ссылке.
Как это работает
Например, Вы хотите разместить в карточке товара в интернет-магазине таблицу размеров доступную лишь по специальной кнопке, открывающей список или блок, чтобы это не влияло на восприятие подробной информации о позиции.
- подобрать текст, который будет являться ссылкой/заголовком раскрывающегося блока
- разместить информацию: текст и таблицу со значениями.
Таким образом, у Вас должно получиться, например:
Таблица размеров
Россий-
ский размер
Между-
народ-
ный размер
Раскрывающийся текст при клике
Я думаю, вы видели на некоторых сайтах, что некоторая часть текста изначальна невидима и только при клике на текстовую ссылку «Подробнее…», «Развернуть» или «Показать/скрыть» появляется скрытая часть текста. Это иногда удобно для навигации по тексту, если он очень большой и некоторую часть/части текста можно и даже нужно скрыть. В любом случае пользователь в любой момент может развернуть скрытый текст и прочесть его. Таким же образом можно скрыть не только текст, но и различные изображения, картинки.
Скажу по секрету, что некоторые SEO-шники таким образом скрывают текст для продвижения сайта под ссылкой простой точки, ведь этот текст предназначен для поисковиков, а не для людей, но не будем о грустном.
Раскрывающийся текст HTML
Тегов HTML, которые смогли бы развернуть при необходимости и показать скрытый текст, пока нет. На форумах в BB-коде в этих целях используется тег [spoiler][/spoiler], но он не работает в HTML.
Для раскрытия текста при клике на текстовую ссылку, нужен скрипт. Я в сети нашла очень простой скрипт.
Скрипт, раскрывающий текст
Ниже сам скрипт. Так как я знаю, как иной раз тяжело в 3 ночи что-то сообразить и понять элементарные казалось бы вещи или когда не понимаешь вообще о чём речь, но нужно кровь из носа выполнить задуманное, в скрипте подробно описано что где поменять/добавить.
Подробнее. (или любая другая надпись на ссылке, при клике на которую показывается весь скрытый изначально текст)
ЗДЕСЬ ПИШЕМ ИЛИ ВСТАВЛЯЕМ ТЕКСТ, КОТОРЫЙ ДОЛЖЕН БЫТЬ ПО УМОЛЧАНИЮ СКРЫТЫМ И ПОКАЗЫВАТЬСЯ (РАСКРЫВАТЬСЯ) ТОЛЬКО ПРИ КЛИКЕ НА ССЫЛКУ "ПОДРОБНЕЕ", СО ВСЕМИ НУЖНЫМИ ТЕГАМИ.
Но этот метод, точнее, скрипт, работает только если вам необходимо скрыть на одной страничке один блок текста. В случаях, когда на одной странице таких скрывающихся блоков текста будет несколько, этот скрипт не подходит. Для этих целей есть другой скрипт, который можно использовать, как для скрытия на одной странице одного, так и нескольких блоков текста или картинок. Скрипт ниже:
Скрипт, раскрывающий несколько блоков текста или картинок на одной странице
Показать/скрыть детальную информацию о о блоке текста №1
Показать/скрыть детальную информацию о о блоке текста №2
Показать/скрыть детальную информацию о о блоке текста №3
Показать/скрыть детальную информацию о о блоке текста №4
Чтобы по умолчанию скрытый текст был открытым в коде меняем display:none на display:block.
Вот и всё! В любом случае, если возникнут вопросы — пишите, буду рада помочь!
Удачи вам в этом порой нелегком деле веб-строительства, достижения всех поставленных целей, выполнения заданий в срок, постоянного совершенствования и крепкого здоровья!