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

Как сделать плавное появление блока (спойлер)

2015-12-15 / Вр:23:43 / просмотров: 11577

В этой статье, я покажу два примерчика, с помощью которых, можно сделать плавное появление скрытой информации при нажатии по ссылке или кнопке.
Другими словами, узнаете, как сделать спойлер.

Для начала посмотрите пример:

[просмотреть демонстрацию]

Для того, чтобы работал спойлер, нужно подключить библиотеку jQuery. Для этого в шапке сайта пропишите вот такой код:

<script ENGINE="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

Теперь вставьте html код:

<b class="spoiler-title">показать / скрыть</b>
<div class="spoiler-body">
Здесь могут быть правила, картинки, фотогалерея, видео, форма контактов и т.д.
</div>

В CSS добавьте вот это:

.spoiler-body
{
display:none;background:#f1f1f1;
}

Способ №1

При нажатии на «показать / скрыть» плавно выплывет скрытый блок с информацией, при этом текст «показать / скрыть» остается. При нажатии повторно на текст «показать / скрыть» появившийся блок плавно скроется. Для этого вставьте вот такой скрипт:

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-title').click(function(){
$(this).parent().children('.spoiler-body').slideToggle(500);
returnfalse;
});
});
</script>

Строка №4 – можно регулировать скорость открытия скрытого блока (в миллисекундах).

...........slideToggle(500);

500 - миллисекунды

Полностью готовый код:

<html>
<head>
<title>кодировка HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
.spoiler-body
{
display:none;background:#f1f1f1;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-title').click(function(){
$(this).parent().children('.spoiler-body').slideToggle(500);
returnfalse;
});
});
</script>
<b class="spoiler-title">показать / скрыть</b>
<div class="spoiler-body">
Здесь могут быть правила, картинки, фотогалерея, видео, форма контактов и т.д.<br>
<img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png">
</div>
</body>
</html>

Способ №2

<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
$(this).toggleClass('opened').toggleClass('closed').next().slideToggle(800);
if($(this).hasClass('opened')) {
$(this).html('Скрыть текст');
}
else {
$(this).html('Показать текст');
}
});
});
</script>

Строка №5 – можно регулировать скорость открытия скрытого блока (в миллисекундах).

..........slideToggle(800);

800– миллисекунды

Строка №7 и №10 – текст можно менять (Скрыть текст и Показать текст)

Полностью готовый код:

<html>
<head>
<title>кодировка HTML</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
.spoiler-body
{
display:none;background:#f1f1f1;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('.spoiler-body').hide();
$('.spoiler-title').click(function(){
$(this).toggleClass('opened').toggleClass('closed').next().slideToggle(800);
if($(this).hasClass('opened')) {
$(this).html('Скрыть текст');
}
else {
$(this).html('Показать текст (текст 2)');
}
});
});
</script>
<b class="spoiler-title">Показать текст (текст 1)</b>
<div class="spoiler-body">
Здесь могут быть правила, картинки, фотогалерея, видео, форма контактов и т.д.<br>
<img src="http://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png">
</div>
</body>
</html>

По-моему, неплохо будет для вашего сайта или блога.

Второй спойлер я недавно использовал для одного заказа, чтобы пользователь мог выбрать вид услуги (или несколько услуг), при этом цены автоматически суммировались, и при нажатии на кнопку «Заказать», появлялся скрытый блок с формой заказа:

Шаг 1

Как сделать плавное появление блока (спойлер)

Шаг 2

Как сделать плавное появление блока (спойлер)

Шаг 3

Как сделать плавное появление блока (спойлер)

Вот такую хитрость можно сделать, используя спойлер. Удачи всем!

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

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

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

8 Ответов на комментарий - Как сделать плавное появление блока (спойлер)

Тимофей

16.12.2015 в 08:18

Красиво, полезно, может, пригодится. Только не понял, почему используется
```
<b>Показать текст (текст 1)</b>
```
? Почему не
```
<a>Показать текст (текст 1)</a>
```
?
Grek

16.12.2015 в 09:32

Хорошо, а как сделать расчет по формулам? Как в примере.
Степан => автор блога

18.12.2015 в 08:09

Тимофей, здесь это на эффект не влияет, можно ставить и и другие теги(div, a, p, b, i, h1-h3…). Эффект работает благодаря CSS-классам.

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

18.12.2015 в 08:28

Это не расчет по формулам, это подсчет значений value у выбранных чекбоксов.

<form name="Sum">
  <input ENGINE="checkbox" value="100"/>
  <input type="checkbox" value="200"/>
  <output id="rezultat">Сумма: 0</output>
</form>

<script>
var s = document.forms.Sum,
    d = s.querySelectorAll('input[type="checkbox"]:not([value]), input[type="checkbox"][value=""]');
  for (var i = 0; i < d.length; i++) 
    d[i].disabled = true;
s.onchange = function() { 
  var n = s.querySelectorAll('[type="checkbox"]'),
      itog = 0;
  for(var j=0; j<n.length; j++)
    n[j].checked ? itog += parseFloat(n[j].value) : itog;
    document.getElementById('rezultat').innerHTML = 'Сумма: ' + itog;
}
</script>

Виктор

08.02.2017 в 10:26

Спасибо. Классный эффект. Но как сделать, к примеру, есть 2 блока рядом и чтобы при нажатие на второй первый закрывался?

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

08.02.2017 в 11:03

Вот так, Виктор:

<script>
var show;
function hidetxt(type){
 param=document.getElementById(type);
 if(param.style.display == "none") {
 if(show) show.style.display = "none";
 param.style.display = "block";
 show = param;
 }else param.style.display = "none"
}
</script>

<div>
<a onclick="hidetxt('div1'); return false;" href="#" rel="nofollow">Ссылка 1</a>
<div style="display:none;" id="div1">текст 1</div>
</div>

<div>
<a onclick="hidetxt('div2'); return false;" href="#" rel="nofollow">Ссылка 2</a>
<div style="display:none;" id="div2">текст 2</div>
</div>

nesnayka

09.02.2017 в 01:05

Вот вам еще одно интересное решение без всяких “жаваскриптов” – чистый html + немного css.

<style>
.spoiler {
	position: relative;
}

.click-me {
	width: 50px;
	height: 20px;
	border: 1px solid; // - это чисто для визуализации
}

.input {
	position: absolute; // - позиционируем чекбокс
	top: 0px; // поверх кликабельного блока

	opacity: 0; // - чекбокс полностью прозрачный

	width: 52px; // - размер чекбокса равен размеру 
	height: 22px; // блока, который он перекрывает
	margin: 0;
}

.spoiler > input + .box {
	display: none; // - по дефолту невидимый
}
.spoiler > input:checked + .box {
	display: block; // - если чекбокс активный, блок видимый
}

</style>

<div class="spoiler">
<div class="click-me">123</div>
     <input class="input" ENGINE="checkbox">
     <div class="box">
           Текст сообщения в спойлере.
     </div>
</div>