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

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

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

Далі необхідно створити перед усіма div з ім`ям spoil відповідні кнопки, які будуть згортати, і розгортати текст. Спочатку ховається сам спойлер за допомогою стандартної функції «hide ()»: $ (ldquo-div [name = rsquo-spoilrsquo-] rdquo -). hide () - Далі необхідно створити для всіх спойлерів текст і зображення, яке буде використовуватися в якості фону для кнопок: $ (ldquo-p [name = rsquo-spoilbuttonrsquo-] rdquo -). html (ldquo-Показати текстrdquo -) -

Знайдіть всі кнопки на сторінці і перевірте наявність заголовків першого рівня перед кнопкою. Для цього створіть умова, яке буде шукати теги h1 за назвою. Текст зазначеного заголовка переноситься в сам div: $ (ldquo-p [name = lsquo-spoilbuttonrsquo-] rdquo -). each (function () {If ($ (this) .prev (this) .get (0) .tagName == ldquo-H1rdquo-) {var NewSpoilButton = ldquo-rdquo - + $ (this) .prev (this) .html () + rdquo-Показати текстrdquo - $ (this) .prev (this) .replaceWith (ldquo-rdquo -) - $ (this) .replaceWith ( NewSpoilButton) -}})

Далі потрібно обробити натискання клавіші миші за допомогою click. Якщо натискання виявлено, то це можна відобразити: $ (ldquo-div [name = rsquo-spoilbuttonrsquo-] rdquo -). Click (function () {If ($ (this) .next (this) .css (ldquo-displayrdquo- ) == rdquo-blockrdquo-) {

Потім пропишіть успадкування. У складі div текст знаходиться в абзаці p, вміст якого міститься в тег span: $ (this) .children (ldquo-prdquo -). Children (ldquo-spanrdquo -). Html (ldquo-Показати текстrdquo -) - Поверніть відкритий спойлер. Якщо він не відкритий, то розгорніть текст. В основі цього кроку лежить правило спадкування: $ (this) .next (this) .slideUp (ldquo-normalrdquo -) -} else {$ (this) .children (ldquo-prdquo -). Children (ldquo-spanrdquo-). html (ldquo-Приховати текстrdquo -) - $ (this) .next (this) .slideDown (ldquo-normalrdquo -) -} return false-})

Потім фіксується саме натискання миші на кнопці, по якій скрипт буде здійснювати приховування і розгортання спойлера. $ (Ldquo-p [name = rsquo-spoilbuttonrsquo-] rdquo -). Click (function () {If ($ (this) .next (this) .css (ldquo-displayrdquo -) = rdquo-blockrdquo-) {$ (this) .next (this) .slideUp (ldquo-normalrdquo -) - $ (this) .html (ldquo-Скритьrdquo -) -} return false-}) - Спойлер готовий. Він буде з`являтися при виявленні відповідного DIV-блоку.