BloGGood.ru

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

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

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

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

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

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

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

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

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

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

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

<script ENGINE="text/javascript" src="https://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="https://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="https://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="https://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="https://stepkinblog.ru/wp-content/themes/stepkinblog/images/heder.png">
</div>
</body>
</html>

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

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

Шаг 1

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

Шаг 2

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

Шаг 3

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

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

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

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

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

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

  1. Тимофей

    Красиво, полезно, может, пригодится. Только не понял, почему используется

    <b>Показать текст (текст 1)</b>

    ? Почему не

    <a>Показать текст (текст 1)</a>

    ?

  2. Grek

    Хорошо, а как сделать расчет по формулам? Как в примере.

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

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

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

    Это не расчет по формулам, это подсчет значений 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>
    
  5. Виктор

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

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

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

    <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>
    
  7. nesnayka

    Вот вам еще одно интересное решение без всяких “жаваскриптов” – чистый 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>
    
  8. nesnayka

    Приклеить анимацию на том же CSS, думаю, проблемы не составит.

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

;-) :| :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