Сьогодні я покажу реалізацію спойлера на jquery - дуже-дуже просту, так що ви зможете все повторити буквально за кілька хвилин.
Вітання. Щоб постійно не гуглити, як зробити на Jquery спойлер, вирішив сам 1 раз написати статтю. Тим більше, що деякі знайдені мною варіанти надто вже громіздкі, я ж запропоную вам дуже компактний варіант, буквально в кілька рядків. Відповідно, і реалізувати ви його зможете неймовірно просто і швидко.
Що потрібно?
Тільки бібліотека jquery, яку потрібно підключити до сайту. Якщо у вас сайт на WordPress, то про особливості підключення я писав тут.
Реалізуємо спойлер
Все буде просто, як 2 пальці об асфальт. Будемо вважати, що ви вже підключили jquery, тоді там, де вам потрібно вивести спойлер, вставляємо такий код:
Природно, текст кнопки і сам контент редагуємо під себе. Ви можете додати свої додаткові css класи до будь-яких елементів для доп. стилізації. Тепер я додам в style.css такий код:
По-перше, він стилізує кнопку. По-друге, прибере сам спойлер зі сторінки. Ось так виглядає кнопка:
Під нею, як бачите, нічого немає. Тепер найголовніше - змусимо при кліці на кнопку відкриватися спойлер, а при зворотному кліці - закриватися. Саме так, адже людина може захотіти закрити спойлер, а якщо не дати йому це зробити, він може сильно засмутитися.
Отже, всі чари виконує цей код (якщо вставляти прямо в html, то ось так):
Якщо ж ви хочете вставити код в свій js-файл, то, природно, прибираємо теги script на початку і кінці.
Дуже важливо, щоб скрипт або файл зі скриптом підключався до сайту пізніше jquery. Якщо це не зробити, то нічого працювати не буде! Бібліотека jquery повинна завантажитися перед скриптом.
Ось так зробив я:
Тобто у мене, як бачите, спочатку йде підключення бібліотеки, а потім вже виконується сам скрипт.
перевіряємо результат
Ось що вийшло:
При натисканні на кнопку відбувається плавне поява контенту. При повторному натисканні - плавне зникнення. Так що ось так, друзі. Це був варіант реалізації простого jquery-спойлера.
До слова, я не користуюся цим варіантом, але лише з тієї причини, що поставив на все wordpress-сайти адаптивну тему Root. Вона шикарна і там вже всередині реалізовані спойлери, так навіщо мені додавати ще й свій зайвий код?
Цікаве зі світу сайтобудування
Ви підписалися. Дякую.