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

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

Спойлер є зручним засобом для сайту. Він широко використовується в різних форумах і блогах, даючи користувачеві змогу під час натискання кнопки приховати певний елемент. Більше того, спойлер вигідно виглядає на сайті і допомагає приховати ті частини, які надмірно перевантажують сторінку.

Вам знадобиться

- Бібліотека 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-блоку.