Спойлер на Bootstrap 3

Сегодня разберем простую, но очень удобную структуру в веб-дизайне: спойлер.

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

Перейдем к реализации. Будем продолжать наш код из предыдущей статьи:

(В прошлый раз мы закончили на вкладках)

Тут я создал новый контейнер и ограничил его тэгами </br>, чтобы он отделялся от других элементов на странице.
Далее в контейнере нам надо создать кнопку и два div-блока (один вложен в другой)

Кнопку я сделал с классом "btn-primary", а далее идет блок с классом "collapse", который отвечает за содержимое (которое будет появляться и исчезать по клику). Внутри нашего блока есть еще один блок с классом "well" - этот блок просто отвечает за красивое отображение содержимого (красивая рамка и фон) - в принципе можно обойтись и без него.

Теперь нам надо связать нашу кнопку с блоком с содержимым. Это мы делали уже сто раз:

Тут я добавил блоку с классом "collapse" идентификатор id="spoiler" (название может быть любым), а потом добавил это же название атрибуту href нашей кнопки (через решетку)

Ну и дописал кнопке атрибут data-toggle="collapse" (название класса блока с содержимым) - теперь кнопка точно понимает за какой блок отвечает.

Ну и внутри блока с классом "well" вписал произвольное предложение.

Ах да, чуть не забыл - между тэгами <button> </button> надо вписать какое-нибудь слово - оно будет отображаться на нашей кнопке:

Вот и все. Сохраняем наш html-документ и обновляем страницу:

Спойлер готов - появляется и исчезает по кнопке. Удобно для всяких подсказок, необязательной информации (которая так же может понадобиться какому-то пользователю) и тому подобное.

@honey_and_money - Бизнес в IT с полного нуля