Расрывающийся / скрывающийся текст на сайте (спойлер)

Иногда на сайте нужно, чтобы нажав на ссылку или заголовок, появлялся или скрывался текст (изображение, таблица, блок и т.д.)

Для этого делаем следующее:

1. Переключившись в режим редактирования ноды или блока, нажимаем на кнопку div (рис. 1)

click_div

рис. 1

 

2. В открывшемся окне прописываем класс spoiler-head (см рис. 2). Это контейнер для заголовка нашего спойлера.

spoiler-head

рис. 2

 

3. Создадим теперь содержимое спойлера, которое нужно скрыть. Вновь используем уже знакомую нам кнопку div (см. рис. 1).

В поле Класс CSS вводим следующий класс: spoiler (см. рис. 3) Нажимаем ОК. И в появившийся контейнер вставляем необходимое содержимое.

spoiler

рис. 3

 

4. Сохраняем нашу страницу / блок. И получаем следующее:

Заголовок спойлера

  То что скрыто  

 

Некоторые замечания.

  • Если вы не создадите контейнер с классом spoiler-head, то после сохранения появится такой заголовок спойлера: Показать. 
  • Порядок следования контеййнеров спойлера только такой: spoiler-head под ним spoiler.
25.09.14 10:22

Ваш комментарий