Главная » Эффекты для сайта » Как создать спойлер для сайта

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

2015-01-09 / Вр:23:53 / просмотров: 10921

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <!-- Подключаем jQuery -->
  <script ENGINE="text/javascript" src="http://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="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Спойлеры</title>
    <script type="text/javascript" src="http://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="http://www.w3.org/1999/xhtml">
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
    <title>Спойлеры</title>
    <script type="text/javascript" src="http://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>

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

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

Как узнать id компьютера
Дата: 29 марта 2013
Прокомментировано:90
просмотров: 329386
Размеры форматов листов А0 – А7
Дата: 23 января 2013
Прокомментировано:3
просмотров: 274099
Смешные логические загадки с подвохом, отгадки прилагаются
Дата: 12 ноября 2014
Прокомментировано:5
просмотров: 218704
Установка windows 7 на ноутбук
Дата: 18 декабря 2012
Прокомментировано:169
просмотров: 186297
Готовые макеты блоков для веб-страниц на HTML и CSS
Дата: 25 июня 2014
Прокомментировано:23
просмотров: 176787

9 Ответов на комментарий - Как создать спойлер для сайта

Ильдар Тимербаев

10.01.2015 в 10:20

Ого, а я все думал: что такое спойлер? Встречал несколько раз, но т.к. вопрос не принципиальный, то не вникал в суть. Теперь знаю.
Степан, приведи пример, где у себя в блоге используешь?
Андрей Косолапов

10.01.2015 в 18:50

Ох, коды коды. Куда, зачем и прочее. Может лучше социальный замок поставить И польза, и информацию можно скрыть
Степан => автор блога

10.01.2015 в 23:19

Блок справа “Свежие комментарии”. Нажмите на кнопку “TOP-комментаторов”.
Прохор

08.07.2015 в 09:32

Хочу заметить, что в примере язык спойлера не русский!))
Автор, наверное ты должен знать такую строчку кода в каждой html-странице:
```
<meta charset='utf-8'>
```
Эта строка позволяет браузеру понять, что здесь на русском всё написано В общем не будет таких иероглифов
Степан => автор блога

08.07.2015 в 20:08

Спасибо за поправку, но вынужден вас немного поправить. Если ставить метатег
```
<meta charset='utf-8'>
```
, и и файл должен быть сохранен в utf-8 без бум. Я думаю вы это знаете, если нет, прочитайте об это в этой статье.
И если вы заметили, не дописано только в первом коде метатег, а в остальных все чики-пуки.
В общем, у вас получилось показать, что вы крут и знаете, что такое
```
<meta charset='utf-8'>
```
и куда его вставлять.
Булат

28.11.2015 в 03:11

Kласс!
А можно сделать так, что бы при нажатии на ссылку(спойлер), содержании ссылки исчезала, после того как она показала нам информацию, а сама информация осталась?
Андрей

05.12.2015 в 09:04

Первый спойлер херня полная, 2 не поставишь, открываются оба.
Степан => автор блога

06.12.2015 в 18:56

id каждого спойлера должен быть уникальным. Замените и в се заработает так как надо. Это основы JavaScript.

Степан => автор блога

08.12.2015 в 12:43

Можно!

<script ENGINE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-body3').hide();
$('.spoiler-title3').click(function(){
    $(this).toggleClass('opened').toggleClass('closed').next().slideToggle();
    if($(this).hasClass('opened')) {
        $(this).html('');
    }
    else {
        $(this).html('Показать текст');
    }
});
});
</script>
<b class="spoiler-title3 closed">Показать текст</b>
<div class="spoiler-body3">
Форма контактов
</div>