
Замечательные горизонтальные раскрывающиеся блоки. Применять можно где угодно и для чего угодно. Демо
1. CSS
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
#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
Данный код вставляем перед закрывающим тегом </head>.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
<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)” получая следующее:
1 |
<body onload="slider('slider',0)"> |
Это необходимо для того, чтобы вся конструкция заработала так, как надо.
3. HTML
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<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.
В приведенном выше коде используется лишь три выпадающих блока, но их можно сделать любое количество, для этого нужно взять код блока:
1 2 3 4 5 6 |
<div class="header" id="1-header">Название блока</div> <div class="content" id="1-content"> <div class="text"> Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. Пример раскрывающегося блока. </div> </div> |
Заменить в строках id=”1-header” и id=”1-content” цифру 1 (в данном случае) на порядковый номер блока.
Скажите, а как видоизменить, чтобы предыдущий блок не закрывался сам?
Найти строку
1 |
} else if(contdiv.style.display == 'block') { |
И заменить её на
1 |
} else if(head == div && contdiv.style.display == 'block') { |
Скажите пожалуйста, а если сайт сделан на php и раскрывающихся блоков будет изменяться по мере поступления информации, можно id=”1-header” id=”2-header” и т д сделать их одинаковыми для всех, чтоб был один код в HTML для всех блоков
Вячеслав, id у каждого блока должен быть уникальным, поэтому одинаковый идентификатор недопустим, так как при нажатии на один header будут раскрываться сразу несколько контентов.
А так как у Вас сайт написан на php Вы можете легко делать перебор всех данных, которые хотите вывести в данной “гармошке” (не имеет значения сколько их у Вас) и присваивать им “id=i++;”.
Саламалейкум Дмитрий. Помогите мне пожалуйста. Я очень долго не мог сделать это. Дело в том что я хочу сделать так как в youtube ( не только на этом сайте есть такое).
Как сделать так чтоб первый блок не был скрыт, а показывал. Но когда я кликую на другие он скрывался.(Все остальное оставался также). Я все объясню если не поняли меня. У меня словарный запас очень маленький никак не могу объяснить. Я постараюсь ты только ответь пожалуйста
Здравствуйте Аслан, для этого необходимо заменить строку 22, где написано:
div.style.display = ‘block’;
на
if(i == 1) {div.style.display = ‘block’;} else {div.style.display = ‘none’;}
Наверное я не смог Вам объянить но так как вы сказали не получилось. И япоменял убрал на 21 строке showfirst == 1 && и 1див показывает так как я хотел. Но все равно не то. когда занова кликаеш на ссылку я не хочу чтоб она закрывалась. Спасибо за все! Помогите мне пожалуйста это сделать. Я на сайте сделал почти что хотел но все равно это не то. я там что то закалдовал и у меня почти получилось но я уже забыл как я это сделал. я оставил так как есть давно. Но я все равно хочу это сделать. я вам отправлю скриншот как я хочу сделать
Необходимо заменить body onload=”slider(‘slider’,0)” на body onload=”slider(‘slider’,1)” и будет работать
А как сделать что бы по умолчанию был открыт какой то уже блок
Необходимо заменить body onload=”slider(‘slider’,0)” на body onload=”slider(‘slider’,1)” и будет работать
Где вместо единицы вписать необходимый блок