Скрывать часть текста (+видео)

Словарь

Текстовый редактор - редактор, использующийся в различных разделах сайта для работы с текстом.

Тег — элемент html, который позволяет строить страницы сайта.

Скрывать текст - позволяет скрывать часть текста в ссылку, при клике на которую текст будет раскрываться для прочтения

Назначение

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

Работа со скрытием текста

Для скрытия текста нам необходимо через источник текстового редактора завернуть часть текста в специальный тег:

 

< div class=«panda-hidden-content» data-change-text=«Убрать» data-show-text=«Показать» >

Часть текста для скрытия

< /div >

 

  • > — открытие тега для скрытия. При вставке кода на сайт необходимо удалить пробелы перед/после div.
  • data-change-text=«убрать» – здесь мы можем настроить ссылку для скрытия уже распахнутой части текста. Если нет никакого значения, то идет значение по умолчанию «Скрыть»  (Рисунок 1, Рисунок 2).

  • data-show-text=«показать» — здесь мы можем настроить ссылку для раскрытия спрятанной части текста. Если нет никакого значения, то идет значение по умолчанию «Читать далее…».

  •  — закрытие тега. тег обязательно надо зарывать. Если его оставить открытым, то это может привести к изменению внешнего вида страницы в лучшем случае и к ее неработоспособности в худшем.

Пройдем в любой раздел сайта, где присутствует текстовый редактор, например, в текстовую статью с уже присутствующим текстом. Здесь, через меню редактирования статьи, пройдем в режим ее редактирования (Рисунок 1).

Статья. Меню редактирования статьи. Пункт «Редактировать»

Рисунок 1 - Статья. Меню редактирования статьи. Пункт «Редактировать» 

При редактировании сразу перейдем к текстовому редактору, переходим в источник редактора (Рисунок 2).

Редактирование статьи. Текстовый редактор. Переход в источник

Рисунок 2 - Редактирование статьи. Текстовый редактор. Переход в источник

Теперь, находим ту часть текста, которую хотим скрыть. Заворачиваем ее в тег, описанный ранее в инструкции.  Например, нам надо завернуть второй абзац стихотворения, для этого перед этим абзацем открываем тег (описываем его, вводим значения текста ссылки для скрытия текста, а также для его распахивания), Затем, в конце второго абзаца закрываем этот тег. То есть, у нас должно получиться следующее (Рисунок 3).

Источник. Текст обернут в тег

Рисунок 3 - Источник. Текст обернут в тег для скрытия

При выходе из режима редактора «Источник» (повторный клик по кнопке «Источник») мы не увидим никаких изменений. Но при просмотре статьи та часть, которую мы обернули в тег, будет скрыть в название ссылки, которое указали в источнике (Рисунок 4).

Просмотр статьи. Ссылка для распахивания текста

Рисунок 4 - Просмотр статьи. Ссылка для распахивания текста

При клике по ссылке скрытый текст станет доступен пользователям, а название ссылки изменится. Теперь, чтобы свернуть текст обратно, просто надо второй раз кликнуть по ссылке для скрытия (Рисунок 5).

Просмотр статьи. Ссылка для скрытия текста

Таким образом, можно делать длинные тексты гораздо более привлекательными для чтения.

Варианты использования модуля

Скрывать текст может оказаться полезно для:

  • Продвижения сайта. Не всегда статьи для продвижения бывают коротенькими и привлекательными для чтения, а скрыв часть текста, можно их сделать таковыми. Скрытый текст будет точно также индексироваться, как и выводимый сразу на странице.

  • Более привлекательного внешнего вида длинных статей. Можно сразу вывести основные идеи текста, а уже какие-нибудь доказательства и объяснения скрывать в ссылку. Тем читателям, которым этот текст будет интересен, откроют его, а остальные просто будут читать дальше.

Вернуться к разделу