Власний спойлер з плавним відкриттям і приховуванням вмісту

Основною відмінністю пропонованого в даній темі скрипта від розглянутого раніше є плавне поява і плавне приховування вмісту під спойлером. Для отримання такого ефекту плавного появи і плавного приховування нам буде потрібно підключити бібліотеку jQuery наступним чином:

Для наочного прикладу роботи пропонованого нами скрипта, зверніть увагу на пару спойлерів, що знаходяться нижче:

Текст під спойлером
плавно з'являється
і плавно зникає
при кліці по спойлеру

А це вже інший спойлер!
І він теж працює!

Далі, в тому місці Вашої сторінки, де Ви плануєте використовувати спойлер, необхідно додати наступний код:


Спойлер №1 (клікніть для показу / приховування)

Текст під спойлером

плавно з'являється

і плавно зникає

при кліці по спойлеру


 Спойлер №2 (клікніть для показу / приховування)

А це вже інший спойлер!

І він теж працює!

Звертаємо Вашу увагу на те, що кожен спойлер повинен бути укладений між тегами

. Це необхідно для того щоб кожен спойлер відкривався й закривався окремо, а не все відразу.

Для того, щоб при завантаженні сторінки, все спойлери спочатку були закриті і курсор мишки змінювався при наведенні на спойлери, необхідно додати в шапку сайту між тегами і Наступного код:

При необхідності можна додати кнопки "Закрити всі" і "Відкрити все" спойлери. Для цього додайте ось такий код:

onclick = $ ( "div [class ^ = 'spoiler_body']"). hide ( 'normal')>
onclick = $ ( "div [class ^ = 'spoiler_body']"). show ( 'normal')>

От і все. В результаті у Вас повинен вийти точно такі ж спойлери з плавним показом і приховуванням, як і в прикладі вище.

Згодом даний скрипт був трохи доопрацьований і викладений у вигляді окремої теми - Оновлений скрипт спойлера з плавним відкриттям і приховуванням вмісту.