Для начала приведу пример того, как это работает. На сайте установлен блок ссылок: «Photography», «Web developing», «Programming».
Пользователь нажимает на ссылку «Photography» и получается следующее:
Подобный элемент — ссылка с динамическим текстом — также называется «спойлер». Список зависимых спойлеров, когда открытие одного из них одновременно закрывает другие, обычно называется «аккордеоном».
Теперь немного практики.
Как вставить аккордеон
Отредактируйте любой документ. Вставьте в текст обычный список. Пример.
Выделите список мышкой, откройте меню стилей. Для того чтобы вставить аккордеон, состоящий из независимых друг от друга спойлеров, выберете пункт «Аккордеон со спойлерами», чтобы вставить классический аккордеон, где может быть раскрыт только один пункт, — «Аккордеон».
Первый уровень списка станет переключателем раскрытия/закрытия контента, а вложенные элементы второго уровня — содержимым, что сразу отобразится в редакторе:
Ваш аккордеон уже работает на сайте, но для более красивого внешнего вида стоит оформить заголовки аккордеона подобающим образом. Для этого выделите заголовок спойлера мышью и откройте меню стилей:
В списке найдите пункт «Заголовок в аккордеоне», кликните на нем — ваши действия сразу же отобразятся в редакторе в виде оформленного заголовка спойлера:
Проделайте эту операцию с другими заголовками — ваш аккордеон готов.