maximamus,
более на эту тему помочь не могу
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
div {
width: 200px;
height: 100px;
position: absolute;
transition: all 0.8s ease-out;
}
.tab1 {
left : 0;
}
.tab2{
left: 200px;
}
.tab3 {
left: 400px;
}
.test{
width: 600px;
position: relative;
background-image: linear-gradient(to right, #FFCE0A 0%,#5252FF 33%,#FFFF66 33%, #FFFF66 66%,#5252FF 66%, #FFCE0A);
}
div.show{
width: 600px;
height: 0px;
top: 100px;
overflow: hidden;
transition: none;
text-align: center;
}
div.tab2:nth-child(1) ~ div:nth-child(4){ transition: all 0.8s ease-out;
height: 100px; background-color: #FFCE0A;
}
div.tab2:nth-child(2) ~ div:nth-child(5){ transition: all 0.8s ease-out;
height: 100px; background-color: #FFFF66;
}
div.tab2:nth-child(3) ~ div:nth-child(6){ transition: all 0.8s ease-out;
height: 100px; background-color: #5252FF;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$(function(){
var div = $(".test div:not(.show)"), temp = div[1];
div.click(function() {
var cls = this.className;
this.className = temp.className;
temp.className = cls;
temp = this;
});
});
</script>
</head>
<body>
<div class='test'>
<div class='tab1'>1</div>
<div class='tab2'>2</div>
<div class='tab3'>3</div>
<div class='show'>товар 1</div>
<div class='show'>товар 2</div>
<div class='show'>товар 3</div>
</div>
</body>
</html>