Як створити ефект гармошки за допомогою скриптів jQuery

Існує багато різних плагінів, за допомогою яких можна реалізувати гарнурозкривну "гармошку" на сайті, коли більша частина тексту невидима, прихована під заголовком. При натисканні на заголовок, відкривається приховане вікно і стає видно весь текст. А "гармошкою " такий ефект називають тому що заголовків багато і відповідно прихованих текстових блоків теж багато (за кількістю заголовків).

ефект

В даний момент (на скріншоті) розкритий другий блок, всього блоків чотири, але подібних блоків можна зробити скільки завгодно. Особливо подібна "гармошка" актуальна на сайті, коли інформації багато, а місця мало. Досить часто подібним чином реалізують відповіді питання: питання видно, а відповіді приховані і відкриваються при кліку за посиланням (заголовку).

Подивитись живий приклад роботи скрипта можна тут.

Знадобиться і сам плагін. Тому потрібно додатково завантажити вихідний код.

Тепер давайте розбиратися з підключенням та практичною реалізацією "гармошки".

Прописуємо кодЛістінга 1 між тегами та:

Лістинг 1.

Таким чином ми підключаємо бібліотекуjQuery,плагін JS татаблицю стилів до своєї web-сторінки. Не забудьте правильно прописати шлях до цих файлів. За умовчанням уЛистингу 1 вважається, що вони лежать у кореневій папці сайту.

Тепер редагуємо HTML-код веб-сторінки. Між тегами: і