Спойлер на JavaScript

Спойлеры на JavaScript

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

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

При тренировках, сделал несколько разных видов спойлеров, хотя принцип их создания одинаков для всех.
Не стал особо "заморачиваться" со стилями выводимых вкладок. Главное - это отличный результат работы написанного скрипта.

Первый спойлер

"Табличный". Написал его, применив тэги таблицы в HTML-коде.

Спойлер (кликните для показа/скрытия)

* * *

Второй спойлер

"Блочный". Ещё один спойлер, но у него вместо таблицы - логические блоки div, а кроме того, "повесил" на фон 1-ого блока рисунок кнопки. Симпатичнее.

* * *

Третий спойлер

"Строчный". Третий вид спойлера. Самый, наверное, часто употребляемый. Строка.

Тестовая строка подсказки (спойлер). Открыть/Закрыть

* * *

Четвёртый спойлер

"Кнопка". Можно и так оформить внешний вид спойлера, применив для этого в 1-ом логическом блоке div тэг input с типом button.

* * *

Интересно! Про существование последнего примера спойлера javascript-код вроде бы и не знает, он в нём НЕ прописан.
Однако, всё работает так, как будто скрипту до этого "дела нет". Такое происходит из-за того, что запуск функции производится в атрибуте onclick первого логического блока, где и прописываем в параметрах идентификатор нужного спойлера.

И ещё. Не забывать(!). В стилях первого (управляющего) блока нужно обязательно прописывать style="display:inline;".
Иначе, курсор станет превращаться в "ручку", и блок будет реагировать по ВСЕЙ своей длине. Хоть, и правильно реагировать, но выглядит такое довольно странно.

Другие виды спойлеров

Показал здесь лёгкий способ создания простых, но удобных для использования спойлеров. Разумеется, есть и другие, не менее интересные способы хорошо сэкономить место на сайте.

Посмотреть другие виды спойлеров, а точнее - создание элементов, по своему действию очень похожих на них, можете в разделе jQuery UI.

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

Впрочем, писал об этом на странице "Современные технологии" (откроется в новом окне), не буду повторяться.

Хотя, конечно, "кому что нравится".

Самая похожая по действию страница называется "Аккордеон" (откроется в новом окне).

Ещё одна носит название "Умные вкладки" (откроется в новом окне).

ВВЕРХ