ureech,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
.tab-in_1.zoomIn {
height: 100px;
background: #FFCC00;
display: block;
}
.animated {
transition: all 1s ease-in-out;
}
.tab-in_1 {
height: 0px;
overflow: hidden;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js">
</script>
<script>
$(function()
{
$('.tab').on('click', function(event)
{
event.preventDefault();
var id = this.getAttribute('href')
$('.tab-in_1').not($('.tab-in_1', id).toggleClass('zoomIn')).removeClass('zoomIn')
}
);
}
);
</script>
</head>
<body>
<ul>
<li>
<a class="tab" href="#tab-mus">Музыка</a>
</li>
<li>
<a class="tab" href="#tab-bis">Бизнесс</a>
</li>
<li>
<a class="tab" href="#tab-pol">Политика</a>
</li>
<li>
<a class="tab" href="#tab-mov">Кино</a>
</li>
</ul>
<div id="tab-mus">
<div class="tab-in_1 animated">
Музыка
</div>
</div>
<div id="tab-pol">
<div class="tab-in_1 animated">
Политика
</div>
</div>
<div id="tab-mov">
<div class="tab-in_1 animated">
Кино
</div>
</div>
<div id="tab-bis">
<div class="tab-in_1 animated">
Бизнесс
</div>
</div>
</body>
</html>