Закрыть ... [X]

Как сделать свой спойлер для сайта

Итак, для начала давайте выясним, что веб-мастера называют сплойлером.

Сплойлер – это скрытая информация на сайте, которая появляется после нажатия кнопки или ссылки.
Например, на сайтах размещают лупу поиска и при нажатии на нее, открывается блок с полем поиска. Или в конце статьи ставят ссылку, например, «комментарии» и при нажатии по этой ссылке, откроются скрытые комментарии.

Я думаю все предельно просто!

Как же такой эффект для сайта реализовать?
Вот рабочий код:

<!DOCTYPE html> <html> <head> <!-- Подключаем jQuery --> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <!-- Скрипт плавного открытия и закрытия блока --> <script type='text/javascript'> $(document).ready(function() { $("A#trigger").toggle(function() { // спойлер как сделать свой спойлер для сайта Отображаем скрытый блок $("DIV#box").fadeIn(); // fadeIn - плавное появление return false; // не производить переход по ссылке }, function() { // Скрываем блок $("DIV#box").fadeOut(); // fadeOut - плавное исчезновение return false; // не производить переход по ссылке }); // end of toggle() }); // end of ready() </script> </head> <body> <a href='#' id='trigger'>Открыть/скрыть информацию</a> <div id='box' style='display: none;padding:10px;background-color:#f1f1f1;margin:10px;width:210px;'>Содержимое скрытого блока</div> </body> </html>

[Посмотреть результат]

Этот код выводит один скрытый элемент после нажатия на ссылку или кнопку. Теперь готовый код для отображения нескольких скрытых элементов:

<html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Спойлеры</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script> <style type="text/css">.spoiler_body {display:none;background-color:#f1f1f1;height:100px;width:200px;}.spoiler_links {cursor:pointer;} </style> </head> <body> <div> Спойлер №1 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст в первом спойлере<br> Текст в первом спойлере </div> </div> <div> Спойлер №2 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст во втором спойлере<br> Текст во втором спойлере </div> </div> <br> <input type="button" value="Закрыть все" onclick=$("div[class^='spoiler_body']").hide('normal')> <input type="button" value="Открыть все" onclick=$("div[class^='spoiler_body']").show('normal')> </body> </html>

[Посмотреть результат]

Чтобы добавить еще один или несколько скрытых блоков, достаточно добавить  вот такой код:

<div> Спойлер №3 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст во втором спойлере<br> Текст во втором спойлере </div> </div>

Это будет выглядеть вот так:

<html xmlns="https://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>Спойлеры</title> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('.spoiler_links').click(function(){ $(this).parent().children('div.spoiler_body').toggle('normal'); return false; }); }); </script> <style type="text/css">.spoiler_body {display:none;background-color:#f1f1f1;height:100px;width:200px;}.spoiler_links {cursor:pointer;} </style> </head> <body> <div> Спойлер №1 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст в первом спойлере<br> Текст в первом спойлере </div> </div> <div> Спойлер №2 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст во втором спойлере<br> Текст во втором спойлере </div> </div> <div> Спойлер №2 <a href="" class="spoiler_links">показать / скрыть</a> <div class="spoiler_body"> Текст во втором спойлере<br> Текст во втором спойлере </div> </div> <br> <input type="button" value="Закрыть все" onclick=$("div[class^='spoiler_body']").hide('normal')> <input type="button" value="Открыть все" onclick=$("div[class^='spoiler_body']").show('normal')> </body> </html>

Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓

Последние новости категории:

Похожие статьи

Популярные статьи:

Добавить комментарий

Метки: для сайта, эффекты для сайта


Источник: https://bloggood.ru/effekty-dlya-sajta-2/kak-sozdat-spojler-dlya-sajta.html/


Создаём спойлер для сайта HTML


Как сделать свой спойлер для сайта

Похожие новости


Как сделать кремовый цвет из красок
Как сделать крышу на одно этажном доме
Как сделать для подогрева воды в бани
Обшить салон микроавтобуса своими руками
Как сделать витражный лак
Как сделать прически в школу для детей
Как сделать чтобы осанка была прямая




ШОКИРУЮЩИЕ НОВОСТИ