BloGGood.ru

Блог Костаневича Степана

До Нового Года осталось:

Блог на разные темы, seo-оптимизация, раскрутка сайта, создание сайта, вкусные эффекты для сайта и многое другое…

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

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

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

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

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

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

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

<!DOCTYPE html>
<html>
<head>
  <!-- Подключаем jQuery -->
  <script ENGINE="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>

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

Получай обновления блога!!! Подпишись:

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

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

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

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

  2. Андрей Косолапов

    Ох, коды коды. :o Куда, зачем и прочее. Может лучше социальный замок поставить :| И польза, и информацию можно скрыть :arrow:

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

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

  4. Прохор

    Хочу заметить, что в примере язык спойлера не русский!)) :roll:
    Автор, наверное ты должен знать такую строчку кода в каждой html-странице:

    <meta charset='utf-8'>

    Эта строка позволяет браузеру понять, что здесь на русском всё написано :) В общем не будет таких иероглифов ;-)

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

    Спасибо за поправку, но вынужден вас немного поправить. Если ставить метатег

    <meta charset='utf-8'>

    , и и файл должен быть сохранен в utf-8 без бум. Я думаю вы это знаете, если нет, прочитайте об это в этой статье. :razz:
    И если вы заметили, не дописано только в первом коде метатег, а в остальных все чики-пуки.
    В общем, у вас получилось показать, что вы крут и знаете, что такое

    <meta charset='utf-8'>

    и куда его вставлять. :grin:

  6. Булат

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

  7. Андрей

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

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

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

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

    Можно!

    <script ENGINE="text/javascript" src="https://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>
    

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

;-) :| :x :twisted: :smokes: :smile: :shock: :sad: :rose: :roll: :razz: :pop-corne: :oops: :o :mrgreen: :lol: :idea: :grin: :gazeta: :evil: :cry: :cool: :coffe: :arrow: :???: :?: :!:

Чтобы добавить в комментарий код HTML, PHP, CSS, JavaScript, нужно сделать так: [code] ваш код [/code]

Метки: ,

Мои цели на 2018-2019:

1). Закончить тему «Bootstrap»

2). Закончить тему «Все про PHP и MySQL»

3). Создать портфолио и мини интернет-магазин шаблонов

4). Довести количество статей до 800

5). Добиться посещаемости 3000 человек/сутки

6). Увеличить число подписчиков до 250

Статистика по блогу

Количество записей на блоге: 802
Количество страниц на блоге: 20
Количество рубрик на блоге: 28
Количество меток на блоге: 72
Количество комментариев на блоге: 4573