Замечательные горизонтальные раскрывающиеся блоки. Применять можно где угодно и для чего угодно.
1. CSS
#slider {
width: 508px;
color: #fff;
font-family: Georgia;
font-size: 14px;
}
.header {
width: 488px;
border: 2px solid #3F3F3F;
padding: 8px;
font-weight: bold;
margin-top: 5px;
cursor: pointer;
background: url(images/header.png);
text-align: center;
}
.header:hover {
background: url(images/header_over.png);
color: #B7B7B7;
}
.content {
overflow: hidden;
}
.text {
width: 474px;
border: 2px solid #3F3F3F;
border-top: none;
padding: 15px;
text-align: left;
background: #7F7F7F;
}2. JavaScript
Данный код вставляем перед закрывающим тегом
<script type="text/javascript">
var array = new Array();
var speed = 10;
var timer = 10;
// Loop through all the divs in the slider parent div //
// Calculate seach content divs height and set it to a variable //
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) {
div.style.display = 'block';
} else {
div.style.display = 'none';
}
}
}
}
// Process the click - expand the selected content and collapse the others //
function processClick(div) {
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') {
contdiv.style.height = '0px';
contdiv.style.display = 'block';
initSlide(cont,1);
} else if(contdiv.style.display == 'block') {
initSlide(cont,-1);
}
}
}
// Setup the variables and call the slide function //
function initSlide(id,dir) {
var cont = document.getElementById(id);
var maxh = cont.maxh;
cont.direction = dir;
cont.timer = setInterval("slide('" + id + "')", timer);
}
// Collapse or expand the div by incrementally changing the divs height and opacity //
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>
2.1 Подключение JavaScript
В тег
<body onload="slider('slider',0)">Это необходимо для того, чтобы вся конструкция заработала так, как надо.
3. HTML
<div id="slider">
<div class="header" id="1-header">Первый блок</div>
<div class="content" id="1-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="2-header">Второй блок</div>
<div class="content" id="2-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
<div class="header" id="3-header">Третий блок</div>
<div class="content" id="3-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
</div>
P.S.
В приведенном выше коде используется лишь три выпадающих блока, но их можно сделать любое количество, для этого нужно взять код блока:
<div class="header" id="1-header">Название блока</div>
<div class="content" id="1-content">
<div class="text">
Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока.
</div>
</div>
Заменить в строках
