Як зробити на сайті спойлер

Реалізувати спойлер можна за допомогою популярної підключається бібліотеки 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-блоку.