<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" type="text/css" />
<title>Демонстрация.</title>
<style>
#slider {
width: 100%;
color: #66666;
font-family: Georgia;
font-size: 20px;
}
.header {
width: 23%;
display: inline-block;
border: 1px solid #cccccc;
padding: 8px;
margin-top: 5px;
cursor: pointer;
text-align: center;
}
.header:hover {
color: #666666;
}
.content {
overflow: hidden;
position: absolute;
width: 100%;
margin-top: 5px;
}
.text {
width: 100%;
border: 1px solid #cccccc;
border-top: none;
padding: 15px;
text-align: left;
background: #eeeeee;
font-size: 14px;
}
.regtangle {
position: absolute;
width: 23%;
margin-top: 13px;
z-index: 999;
}
.regtangle:after {
width: 40px;
height: 20px;
content: url("http://berloga-guns.com/assets/templates/berloga/img/regtangle.png");
}
</style>
<script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
<script type="text/javascript">
var array = new Array();
var speed = 10;
var timer = 10;
var arrhe = new Array();
function slider(target, showfirst) {
var slider = document.getElementById(target);
var divs = slider.getElementsByTagName('div');
var divslength = divs.length;
for (i = 0; i < divslength; i++) {
var div = divs[i];
var divid = div.id;
if (divid.indexOf("header") != -1) {
div.onclick = new Function("processClick(this)");
} else if (divid.indexOf("content") != -1) {
var section = divid.replace('-content', '');
array.push(section);
div.maxh = div.offsetHeight;
if (showfirst == 1 && i == 1) {
//speed = 10;
div.style.display = 'block';
} else {
//speed = 0;
div.style.display = 'none';
}
}
}
}
function processClick(div) {
sourc = document.getElementsByClassName("header");
var figure = document.createElement('div');
figure.className = "regtangle";
for (i = 0; i < sourc.length; i++) {
sourc[i].style.margin = '5px 0 0 0';
}
var catlength = array.length;
for (i = 0; i < catlength; i++) {
var section = array[i];
var head = document.getElementById(section + '-header');
var cont = section + '-content';
var contdiv = document.getElementById(cont);
clearInterval(contdiv.timer);
if (head == div && contdiv.style.display == 'none') {
var iiigh = '#' + cont;
var h = $('#' + cont + '').height();
if (h != 0) {
arrhe[i] = h;
head.appendChild(figure);
figure.style.display = 'block';
} else {
h = arrhe[i];
}
h4 = parseInt(h);
var h2 = h4 + 5;
head.style.margin = '0 0 ' + h2 + 'px 0';
contdiv.style.display = 'block';
contdiv.style.margin = '-' + h + 'px 0 0 0';
initSlide(cont, 1);
} else if (contdiv.style.display == 'block') {
initSlide(cont, -1);
}
}
}
function initSlide(id, dir) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
cont.direction = dir;
cont.timer = setInterval("slide('" + id + "')", timer);
}
function slide(id) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
var currheight = cont.offsetHeight;
var dist;
if (cont.direction == 1) {
dist = (Math.round((maxh - currheight) / speed));
} else {
dist = (Math.round(currheight / speed));
}
if (dist <= 1) {
dist = 1;
}
cont.style.height = currheight + (dist * cont.direction) + 'px';
cont.style.opacity = currheight / cont.maxh;
cont.style.filter = 'alpha(opacity=' + (currheight * 100 / cont.maxh) + ')';
if (currheight < 2 && cont.direction != 1) {
cont.style.display = 'none';
clearInterval(cont.timer);
} else if (currheight > (maxh - 2) && cont.direction == 1) {
clearInterval(cont.timer);
}
}
</script>
</head>
<body onload="slider('slider',0)">
<div id="slider">
<div class="header" id="29-header">Первый блок</div>
<div class="content" id="29-content">
<div class="text">
Содержимое блока 1
</div>
</div>
<div class="header" id="2-header">Второй блок</div>
<div class="content" id="2-content">
<div class="text">
Содержимое блока 2
</div>
</div>
<div class="header" id="3-header">Третий блок</div>
<div class="content" id="3-content">
<div class="text">
Содержимое блока 3
</div>
</div>
<div class="header" id="4-header">Четвертый</div>
<div class="content" id="4-content">
<div class="text">
Содержимое блока 4
</div>
</div>
<div class="header" id="5-header">Пятый</div>
<div class="content" id="5-content">
<div class="text">
Содержимое блока 5
</div>
</div>
<div class="header" id="6-header">Шестой</div>
<div class="content" id="6-content">
<div class="text">
Содержимое блока 6
</div>
</div>
<div class="header" id="7-header">Седьмой</div>
<div class="content" id="7-content">
<div class="text">
Содержимое блока 7
</div>
</div>
<div class="header" id="8-header">Восьмой</div>
<div class="content" id="8-content">
<div class="text">
Содержимое блока 8
</div>
</div>
<div class="header" id="9-header">Девятый</div>
<div class="content" id="9-content">
<div class="text">
Содержимое блока 9
</div>
</div>
<div class="header" id="10-header">Десятый</div>
<div class="content" id="10-content">
<div class="text">
Содержимое блока 10
</div>
</div>
</div>
</body>
</html>