Схований блок (спойлер) з допомогою jQuery

42

Сьогоднішній пост буде коротким, невелике уявлення найпростішої реалізації прихованих блоків з вмістом за допомогою jQuery. Як зробити прихований текст на чистому CSS, я розповідав раніше, спосіб хороший, але працює не у всіх браузерах стабільно. jQuery в даному випадку забезпечує гарантовану підтримку всіма браузерами, включаючи гальмо прогресу IE 8.

Для чого взагалі потрібні приховані блоки? Так мало-чи, наприклад, для всякого роду об’ємних пояснень і описів розділів або окремих термінів(слів), і т. д., спектр застосування обмежений лише фантазією, та логічністю використання даного рішення.

Скрытый текст с помощью jQuery

Схований блок з текстовим змістом дуже просто реалізувати за допомогою пари-трійки рядків коду js, при наявності підключеного бібліотеки jQuery. Якщо jQuery у вас ще не підключена, зробіть це можна безпосередньо з сервісу Google, для цього в розділ між тегами … розмістіть наступне:


Тепер залишається прописати в районі перед закриваючим тегом невеликий js:

<script type="text/javascript">
$('.show').click(function() {
$(this).toggleClass('active').next()[$(this).next().is(':hidden') ? "slideDown" : "fadeOut"](400);
});

$(‘.show’).click(function() {
$(this).toggleClass(‘active’).next()[$(this).next().is(‘:hidden’) ? “slideDown” : “fadeOut”](400);
});

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

Подробиці опускаю, html-каркас і стилі css, відображені в онлайн-редакторі, все гранично ясно, так що поковырятся в коді і підлаштувати при необхідності під себе ті чи інші параметри, можете, як кажуть «не відходячи від каси» ))).

Сподіваюся, що кому-небудь дане рішення стане в нагоді в роботі.

З Повагою, Андрій .

Буду всім вдячний, якщо підтримайте проект — додавши блог виключення AdBlock та поділіться посиланням на запис в своїх соціальних мережах: