Как сделать на сайте спойлер?

Спойлер является удобным средством для сайта. Он широко используется в различных форумах и блогах, давая пользователю возможность во время нажатия кнопки скрыть определенный элемент. Более того, спойлер выгодно смотрится на сайте и помогает скрыть те части, которые излишне перегружают страницу.
Создать сайт самостоятельно с Wix.com

Вам понадобится

• - библиотека Jquery

Инструкция

Реализовать спойлер можно при помощи популярной подключаемой библиотеки jquery, написанной на языке программирования Java Script. Она используется для реализации полного взаимодействия языка программирования с HTML кодом разметки страницы.Подключение jquery осуществляется при помощи HTML посредством тега «». Необходимо указать место, где расположен скрипт, и задать его тип:$(document) .ready(function()

Текстовый фрагмент, указанный в рамках определенного абзаца, необходимо заключить в отдельный слой - div, с помощью которого будет осуществляться управление самим спойлером: Шла Саша по шоссе и сосала сушку.

Далее необходимо создать перед всеми div с именем spoil соответствующие кнопки, которые будут сворачивать, и разворачивать текст. Сначала скрывается сам спойлер при помощи стандартной функции «hide()»:$(“div[name = ’spoil’]”).hide();Далее необходимо создать для всех спойлеров текст и изображение, которое будет использоваться в качестве фона для кнопок:$(“p[name = ’spoilbutton’]”).html(“Показать текст”);

Найдите все кнопки на странице и проверьте наличие заголовков первого уровня перед кнопкой. Для этого создайте условие, которое будет искать теги h1 по названию. Текст указанного заголовка переносится в сам div:$(“p[name = ‘spoilbutton’]”).each(function() {If ($(this).prev(this).get(0).tagName == “H1” ) {var NewSpoilButton = “”+$(this).prev(this).html()+”Показать текст”;$(this).prev(this).replaceWith(“”); $(this).replaceWith(NewSpoilButton); } })

Далее нужно обработать нажатие клавиши мыши при помощи click. Если нажатие обнаружено, то это можно отобразить:$(“div[name=’spoilbutton’]”).click(function () {If($(this).next(this).css(“display”)==”block”) {

Затем пропишите наследование. В составе div текст находится в абзаце p, содержимое которого помещается в тег span:$(this).children(“p”).children(“span”).html(“Показать текст”);Сверните открытый спойлер. Если он не открыт, то разверните текст. В основе этого шага лежит правило наследования:$(this).next(this).slideUp(“normal”);} else { $(this).children(“p”).children(“span”).html(“Скрыть текст”);$(this).next(this).slideDown(“normal”);} return false; })

Затем фиксируется само нажатие мыши на кнопке, по которой скрипт будет осуществлять скрытие и разворачивание спойлера. $(“p[name=’spoilbutton’]”).click(function () {If ($(this).next(this).css(“display”)=”block”) {$(this).next(this).slideUp(“normal”);$(this).html(“Скрыть”);} return false; });Спойлер готов. Он будет появляться при обнаружении соответствующего DIV-блока.

Оцените статью!