Вам понадобится
  • - библиотека Jquery
Инструкция
1
Реализовать спойлер можно при помощи популярной подключаемой библиотеки jquery, написанной на языке программирования Java Script. Она используется для реализации полного взаимодействия языка программирования с HTML кодом разметки страницы.Подключение jquery осуществляется при помощи HTML посредством тега «». Необходимо указать место, где расположен скрипт, и задать его тип:$(document) .ready(function()
2
Текстовый фрагмент, указанный в рамках определенного абзаца, необходимо заключить в отдельный слой - div, с помощью которого будет осуществляться управление самим спойлером: Шла Саша по шоссе и сосала сушку.
3
Далее необходимо создать перед всеми div с именем spoil соответствующие кнопки, которые будут сворачивать, и разворачивать текст. Сначала скрывается сам спойлер при помощи стандартной функции «hide()»:$(“div[name = ’spoil’]”).hide();Далее необходимо создать для всех спойлеров текст и изображение, которое будет использоваться в качестве фона для кнопок:$(“p[name = ’spoilbutton’]”).html(“Показать текст”);
4
Найдите все кнопки на странице и проверьте наличие заголовков первого уровня перед кнопкой. Для этого создайте условие, которое будет искать теги 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); } })
5
Далее нужно обработать нажатие клавиши мыши при помощи click. Если нажатие обнаружено, то это можно отобразить:$(“div[name=’spoilbutton’]”).click(function () {If($(this).next(this).css(“display”)==”block”) {
6
Затем пропишите наследование. В составе 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; })
7
Затем фиксируется само нажатие мыши на кнопке, по которой скрипт будет осуществлять скрытие и разворачивание спойлера. $(“p[name=’spoilbutton’]”).click(function () {If ($(this).next(this).css(“display”)=”block”) {$(this).next(this).slideUp(“normal”);$(this).html(“Скрыть”);} return false; });Спойлер готов. Он будет появляться при обнаружении соответствующего DIV-блока.