Как сделать плавную смену блоков, test.ulitabiz.in.ua/#catalog когда переключаешь вообще не понятно что, что-то происходит т.к. у меня картинки одинаковые, а описание под ними разное. Как бы сделать, как вот здесь postelshop.com эффект плавной смены блоков! Или загрузки. Что-то такое.
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Постельное бельё РАЗПРОДАЖА!!!</title>
<style type="text/css">
.block-of-text{
height: 0px;
overflow: hidden;
transition: height 1s linear;
}
.block-of-text.active{
height: auto;
}
</style>
</head>
<body>
<script src="http://code.jquery.com/jquery.min.js" type="text/javascript"></script>
<script>
$(document).ready(function(){
$('.js-open-box').click(function(){
var id = $(this).attr("data-target");
if ( !$(id).hasClass("active") ){
$(".js-block-of-text").removeClass("active");
$(id).addClass("active");
}
});
});
</script>
<a href="#" class="js-open-box" data-target="#box1">Записаться</a>
<a href="#" class="js-open-box" data-target="#box2">Записаться</a>
<a href="#" class="js-open-box" data-target="#box3">Записаться</a>
<a href="#" class="js-open-box" data-target="#box4">Записаться</a>
<div class="js-block-of-text block-of-text" id="box1">Отображаемый блок 1</div>
<div class="js-block-of-text block-of-text" id="box2">Отображаемый блок 2</div>
<div class="js-block-of-text block-of-text" id="box3">Отображаемый блок 3</div>
<div class="js-block-of-text block-of-text" id="box4">Отображаемый блок 3</div>
</body>
</html>
Простой
