Форум Сайтостроение Веб-строительство

Помогите по javascript

OI
На сайте с 05.03.2011
Offline
109
ORIGAMMI
851

Есть скрипт типа меню вертикальный аккордеон. В нем 3 секции. Нажимаем на секцию она открывается или закрывается. Я хочу добавить еще секций, ну например еще 4. Какие параметры нужно изменить чтобы он работал? Кто поможет?

<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;
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;
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>

DP
На сайте с 24.04.2012
Offline
16
developer_php
#1

http://jemand.ru/raskryvayushhiesya-bloki-div-na-javascript/

lemo_ua
На сайте с 10.05.2011
Offline
23
lemo_ua
#2

используйте JQuery

dkameleon
На сайте с 09.12.2005
Offline
386
dkameleon
#3

ну и мой любимый, на ЦСС анимациях :)

<style type="text/css">
.acco > * {
	transition: all 300ms ease-in-out;
	-moz-transition: all 300ms ease-in-out;
	-o-transition: all 300ms ease-in-out;
	-webkit-transition: all 300ms ease-in-out;
}
.acco > * { height: 40px; display: block; }
.acco > .open { height: 100px; }

.acco > * { border: 1px solid red; overflow: hidden; }
h1 { margin: 0; }
</style>

<div class="acco">
	<div onclick="this.className = this.className == 'open' ? '' : 'open'; ">
		<h1>Home</h1>
		bla-bla
	</div>
	<div onclick="this.className = this.className == 'open' ? '' : 'open'; ">
		<h1>Articles</h1>
		bla2
	</div>
	<div onclick="this.className = this.className == 'open' ? '' : 'open'; ">
		<h1>Contacts</h1>
		contacts
	</div>
</div>
Дизайн интерьера (http://balabukha.com/)
!B
На сайте с 16.08.2007
Offline
57
!html.by
#4

автору надо использовать уникальные ID для каждого из новых блоков DIV

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий