Урок. Кнопка "Аккордеон" (Insert accordion).

Кнопка аккордеон

Здравствуйте, в этом уроке я расскажу вам о кнопке "Аккордеон" (Insert accordion) в онлайн-редакторе CKEditor.

Начну с того что продемонстрирую как выглядит аккордеон.

Slack

Корпоративный мессенджер.

Trello

Система управления проектами в режиме онлайн.

Яндекс

Поисковая система, популярная в странах СНГ.

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

Прежде чем начать редактировать заголовки и содержание вам следует знать, что в любом редактируемом блоке обязательно должен быть хотя бы 1 символ иначе этот блок исчезнет, т.е. нельзя выделив весь текст нажимать пробел, Esc или Backspace. Чтобы отредактировать текст заголовка или содержания нужно выделить текст, который там уже есть и начать набирать свой.

Теперь, когда мы уже знаем, как создавать и оформлять аккордеон, нам осталось только научиться создавать в нём блоки заголовка и содержания. Итак, чтобы создать и удалить блок нам нужно кликнуть в любом месте созданного аккордеона и выбрать соответствующий нашему желанию пункт. Всего этих пунктов три:

  • Вставить блок перед (Add accordion before)
  • Вставить блок после (Add accordion after)
  • Удалить блок (Remove accordion tab)

В целом аккордеон очень полезен для того, чтобы скрыть ту часть контента, которая не обязательна к прочтению, что в свою очередь позволяет визуально разгрузить текстовую часть материала. Многие не захотят читать статью или пост, если в нём сплошной текст и его много.

Задание:

  1. В комментариях создайте 2 аккордеона.
  2. В первом должно быть более 3 блоков.
  3. Во втором должен быть 1 блок.
  4. Добавьте свой текст в заголовки и в содержание.
  5. Сверху над первым аккордеоном добавьте какое-нибудь описание к нему.
  6. Добавьте описание и между аккордеонами.
  7. Также добавьте текст снизу под вторым аккордеоном.

На этом урок окончен, до встречи в следующей статье.

© 2018-2019 MaxReform. All rights reserved.