Untitled

<html>
<head>
<link rel="stylesheet" type="text/css" />
<title> Spisok </title>
<style>
.ul {
list-style-image: url(11.png)
}
#slider {
 width: 508px;
 color: #66666;
 font-family: Arial;
 font-size: 15px;
 }
.header {
 width: 488px;
 padding: 8px;
 margin-top: 5px;
 cursor: pointer;
 text-align: left;
 }
.header:hover {
 color: #666666;
 }
.content {
 overflow: hidden;
 }
.text {
 width: 474px;
 padding: 15px;
 text-align: left;
 font-size: 15px;
 background: snow;
 }
</style>
<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>
</head>
<body onload="slider('slider',0)">
<div id="intro">
<p>
<ul class=ul>
<div id="slider">
 <li><div class="header" id="1-header"><b>Устройства ввода</b></div></li>
 <div class="content" id="1-content">
 <div class="text">
 Клавиатура<br><br>
 Мышь<br><br>
 Сканер<br><br>
 Микрофон<br><br>
 Видео-и Веб-камера<br><br>
 Цифровой фотоаппарат<br><br>
 Цифровой диктофон<br><br>
 Тачпад<br><br>
 Тачскрин<br><br>
 и т. д.
 </div>
 </div>
 <li><div class="header" id="2-header"><b>Устройства вывода</b></div></li>
 <div class="content" id="2-content">
 <div class="text">
 Монитор<br><br>
 Принтер<br><br>
 Графопостроитель<br><br>
 Проектор<br><br>
 Колонки<br><br>
 Наушники<br><br>
 Дисковод<br><br>
 Жесткий диск<br><br>
 и т. д.
 </div>
 </div>
 <li><div class="header" id="3-header"><b>Устройства манипуляторы</b></div></li>
 <div class="content" id="3-content">
 <div class="text">
 Мышь<br><br>
 Трекбол<br><br>
 Тачпад<br><br>
 Джойстик<br><br>
 Клавиатура<br><br>
 Графический планшет<br><br>
 Геймпады<br><br>
 Компьютерный руль<br><br>
 и т. д.
 </div>
 </div>
</div>
</p>
</ul>
</div>


</body>
</html>