Скрипт для згортання контенту на кліку, Кабінет Веб-майстра - Створення та обслуговування сайтів
Сьогодні ми навчимося згортати контент на кліку на заголовку (або кнопці). Створимо для цього прості JQuery скрипт.
Головний плюс нашого скрипту буде в тому, що він є універсальним. Вставивши його 1 раз на сторінку, можна скільки завгодно разів додавати такі блоки, де потрібно згорнути контент. І на кліку на заголовку - буде згортатися потрібний!
Для початку створимо html-розмітку:
Нічого особливого тут нема. Батьківський елемент – .block. Заголовок h1 з класом .extremum-click, яким ми будемо кликати і сам контент з класом .extremum-slide, який буде згортатися і розгортатися.
Тепер задаємо стилі для кращого візуального сприйняття нашого прикладу:
А тепер найцікавіше – наш скрипт:
Ось і все – такий простий скрипт! Єдина умова – скрипт потрібно вставляти наприкінці сторінки. Не забуваймо, що це JQuery, а отже попередньо потрібно підключити свіжу бібліотеку! Що вказано у скрипті? По кліку на елементі з класом .extremum-click потрібно приховати блок .extremum-slide, який знаходиться на 1 рівні з .extremum-click (саме того, за яким скоєно клік - це необхідно для додавання кількох блоків на 1 сторінку). Швидкість згортання/розгортання – slow (600 мс). Можна поміняти на fast (200 мс) або вказати значення в мілісекундах. Користуйтесь!