Плавное увеличение высоты div

@SuperAgent007 · Регистрация: 16.05.2012

Студворк — интернет-сервис помощи студентам

На странице есть 4 ссылки в строчку нужно чтобы при нажатии на ссылку плавно под ней открывался div с контентом (текст + картинки) определенной высоты и шириной в страницу, так при нажатие на каждую из сылок должен открываться такой div а предыдущий открытый должен закрываться (width:0; height:0;).
Помогите пожалуйста!

Заранее спс

@newJS · 10.03.2013, 06:30

только непонятно зачем ссылка, а не простой элемент

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
<div id="contLinks">
<a href="#">link1</a>
<a href="#">link2</a>
<a href="#">link3</a>
<a href="#">link4</a>
 
<div class="contDiv">for link1<br>ww</div>
<div class="contDiv">for link2<br><br>w</div>
<div class="contDiv">for link3<br>w<br>w</div>
<div class="contDiv">for link4<br><br><br><br>w</div>
 
</div>

CSS
1
2
.contDiv {display:none; border:1px solid red; background:silver;}
.contDiv {overflow:hidden;}

JavaScript
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
function nextLoad(){
 
 };
 
(function(){
var Q, d;
Q={};
Q.elem=[];
Q.ind=null;//индекс открытого
Q.hei=0;//текущая высота
Q.step=2;//скорость
Q.tim=33;//скорость
d=document;
 
onload=function(){
init();
nextLoad();
 };
 
function init(){
var m1, m2, k1, k2;
m1=d.getElementsByTagName("a");
m2=d.getElementsByTagName("div");
k1=Q.len=m1.length;
k2=m2.length;
while(k2--){
if(m2[k2].className=="contDiv"){//только дивы-контейнеры
k1--;
m2[k2].style.display="block";
m1[k1].onclick=clikLink;
Q.elem.push([m1[k1], m2[k2], m2[k2].offsetHeight]);
m2[k2].style.display="none";}};
 
 };
 
function clikLink(){
var k=Q.len;//сколько всего ссылок/кнопок
while(k--){
if(Q.elem[k][0]===this){//ищем в массиве кликнутый элемент
if(Q.ind!==null){Q.elem[Q.ind][1].style.display="none";};//закрыть открытый
Q.ind=k;
Q.hei=0;
Q.elem[k][1].style.height=0;
Q.elem[k][1].style.display="block";
showDiv();
return false;}};
 };
 
function showDiv(){//разворачиваем
Q.hei+=Q.step;
if(Q.hei<Q.elem[Q.ind][2]){
Q.elem[Q.ind][1].style.height=Q.hei+'px';
setTimeout(showDiv, Q.tim);}
else{Q.elem[Q.ind][1].style.height=Q.elem[Q.ind][2]+'px';};
 
 };
 
 })();

@SuperAgent007 · 10.03.2013, 21:01 **[ТС]**

Спасибо большое!! Мажно сделать чтоб перед тем как откроется следующий div пред идущий закрывался (плавно уползая вверх) и только после этого открывался следующий

@newJS · 11.03.2013, 08:22

html тот же

CSS
1
2
.contDiv {border:1px solid red; background:silver;}
.contDiv {overflow:hidden;}

JavaScript
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
function nextLoad(){
 
 };
 
(function(){
var Q, d;
Q={};
Q.elem=[];
Q.ind=null;//по кому кликнули
Q.indC;//текущий индекс
Q.hei=0;//текущая высота
Q.stepS=2;//скорость
Q.timS=33;//скорость
Q.stepH=3;//скорость
Q.timH=22;//скорость
d=document;
 
onload=function(){
init();
nextLoad();
 };
 
function init(){
var m1, m2, k1, k2;
m1=d.getElementsByTagName("a");
m2=d.getElementsByTagName("div");
k1=Q.len=m1.length;
k2=m2.length;
while(k2--){
if(m2[k2].className=="contDiv"){//только дивы-контейнеры
k1--;
m1[k1].onclick=clikLink;
Q.elem.push([m1[k1], m2[k2].style, m2[k2].offsetHeight]);
m2[k2].style.display="none";}};
 
 };
 
function clikLink(){
var k=Q.len;//сколько всего ссылок/кнопок
while(k--){
if(Q.elem[k][0]===this){//ищем в массиве кликнутый элемент
if(Q.ind===null){//первый раз, пока всё закрыто
Q.ind=Q.indC=k;
Q.hei=0;
Q.elem[k][1].height=0;
Q.elem[k][1].display="block";
showDiv();}
else{
Q.ind=k;
hideDiv();};
return false;}};
 };
 
function hideDiv(){//сворачиваем
Q.hei-=Q.stepH;
if(Q.hei>0){
Q.elem[Q.indC][1].height=Q.hei+'px';
setTimeout(hideDiv, Q.timH);}
else{
Q.elem[Q.indC][1].height=0;
Q.elem[Q.indC][1].display="none";
Q.indC=Q.ind;//подставляем индекс кликнутого
Q.hei=0;
Q.elem[Q.indC][1].height=0;
Q.elem[Q.indC][1].display="block";
showDiv();};//разворачиваем свежекликнутый
 
 };
 
function showDiv(){//разворачиваем
Q.hei+=Q.stepS;
if(Q.hei<Q.elem[Q.indC][2]){
Q.elem[Q.indC][1].height=Q.hei+'px';
setTimeout(showDiv, Q.timS);}
else{Q.elem[Q.indC][1].height=Q.elem[Q.indC][2]+'px';};
 
 };
 
 
 })();

@SuperAgent007 · 13.03.2013, 23:59 **[ТС]**

Спосибо! но в Web-kit не робит

@newJS · 14.03.2013, 07:04

Все работает во всех браузерах, ие6, ие8, опера, лиса, гуглоподобные.
Методом научного тыка удалось предположить, что css остался от предыдущей версии, а они разные.

@SuperAgent007 · 18.03.2013, 21:38 **[ТС]**

Ещё раз спасибо вам огромное!

Но я никак не могу разобраться:
Если после или перед ссылками в блоке <div id="contLinks"> вставить другиессылки (вне блока) скрипт работает криво либо перестаёт работать вообще.
Если ссылка стоит перед тут я разобрался, я сделал так:
39 строка

JavaScript
1
var k=Q.len - 1;//сколько всего ссылок/кнопок

(- 1 потомучто у меня всего одна ссылка перед этим блоком), а вот как быть ссылками после блока никак не пойму.
Погите пожалуйста!

@newJS · 18.03.2013, 21:59

дай реальный html который не работает, наверно придется переделать отлов нужных тегов
по идее не должно быть "чужих" тегов в контейнере, но раз они есть, чё нить придумаем

@SuperAgent007 · 18.03.2013, 22:34 **[ТС]**

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<table width="713" border="0" valign="middle">
      <tr>
        <td width="100%" height="40" align="left">
        <div id="contLinks">
          <ul id="menu">
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
            <li><a href="#">ПУНКТ</a></li>
          </ul>
    </div>
          </td>
        </tr>
    </table>

Полсе этого идёт пару табличек и те div которые раскрываются и всё это в глобальной таблице, а перед этим одна (возможно 3 ссылки)

HTML5
1
2
3
4
5
6
7
        <div class="contDiv" style="background-color: #C82D00"><img src="/img/exampels/1.png"></div>
        <div class="contDiv" style="background-color: #A97A75"><img src="/img/exampels/2.png"></div>
        <div class="contDiv" style="background-color: #CAAC00"><img src="/img/exampels/3.png"></div>
        <div class="contDiv" style="background-color: #E67111"><img src="/img/exampels/4.png"></div>
        <div class="contDiv" style="background-color: #674050"><img src="/img/exampels/5.png"></div>
        <div class="contDiv" style="background-color: #524A33"><img src="/img/exampels/6.png"></div>
        <div class="contDiv" style="background-color: #959595"><img src="/img/exampels/7.png"></div>

А после этого всего основная страница с множеством div и ссылок.

А еще хотелось бы, что-бы когда ножимаеш на раскрытую ссылку соответствующий div закрывался (ну это я помойму уж слишком наглею

)

@newJS · 19.03.2013, 20:34

Сегодня поковыряю.

Добавлено через 13 часов 18 минут
ковыряйся, пришлось переделывать

HTML5
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
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>w121</title>
<meta http-equiv="Content-Type" content="text/html; charset=Windows-1251">
<link rel="stylesheet" type="text/css" href="test_3.css">
<script type="text/javascript" src="test_3.js"></script>
 
</head>
 
<body>
 
 
<a href="#w1">link1</a>
<a href="#w1">link2</a>
<a href="#w1">link3</a>
<a href="#w1">link4</a>
 
<div class="contDiv2">for link1<br>ww</div>
<div class="contDiv2">for link2<br><br>w</div>
<div class="contDiv2">for link3<br>w<br>w</div>
<div class="contDiv2">for link4<br><br><br><br>w</div>
 
 
 
<table width="713" border="0" valign="middle">
      <tr>
        <td width="100%" height="40" align="left">
          <ul id="menu">
<li><a href="#w1" type="noContA">не наше</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
<li><a href="#w1">не наше</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
            <li><a href="#w1" type="contA">ПУНКТ</a></li>
<li><a href="#w1">не наше</a></li>
          </ul>
          </td>
        </tr>
    </table>
 
Полсе этого идёт пару табличек и те div которые раскрываются и всё это в глобальной таблице, а перед этим одна (возможно 3 ссылки)
 
Код HTML
<div id="contDivs">
<div class="contDiv" style="background-color: #C82D00"><img src="/img/exampels/1.png" alt="">for link1<br>ww</div>
<div class="contDiv" style="background-color: #A97A75"><img src="/img/exampels/2.png" alt="">for link2<br><br>w</div>
<div class="contDiv" style="background-color: #CAAC00"><img src="/img/exampels/3.png" alt="">for link3<br>w<br>w</div>
<div class="contDiv" style="background-color: #E67111"><img src="/img/exampels/4.png" alt="">for link4<br><br><br><br>w</div>
<div class="contDiv" style="background-color: #674050"><img src="/img/exampels/5.png" alt="">for link1<br>ww</div>
<div class="contDiv" style="background-color: #524A33"><img src="/img/exampels/6.png" alt="">for link4<br><br><br><br>w</div>
<div class="contDiv" style="background-color: #959595"><img src="/img/exampels/7.png" alt="">for link2<br><br>w</div>
</div>
А после этого всего основная страница с множеством div и ссылок.
<a href="#w1">link1</a>
<a href="#w1">link2</a>
<a href="#w1">link3</a>
<a href="#w1">link4</a>
 
<div class="contDiv2">for link1<br>ww</div>
<div class="contDiv2">for link2<br><br>w</div>
<div class="contDiv2">for link3<br>w<br>w</div>
<div class="contDiv2">for link4<br><br><br><br>w</div>
А еще хотелось бы, что-бы когда ножимаеш на раскрытую ссылку соответствующий div закрывался (ну это я помойму уж слишком наглею ) 
<a name="w1"></a>
</body>
</html>

CSS
1
2
.contDiv {border:1px solid red; background:silver;}
.contDiv {overflow:hidden;}

JavaScript
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
function nextLoad(){
 
 };//
(function(){
var Q, d;
Q={};
Q.elem=[];
Q.ind=null;//по кому кликнули
Q.indC;//текущий индекс
Q.hei=0;//текущая высота
Q.stepS=2;//скорость
Q.timS=33;//скорость
Q.stepH=3;//скорость
Q.timH=22;//скорость
d=document;
 
onload=function(){
init();
nextLoad();
 };
 
function init(){
var m1, m2, k1, k2;
//все ссылки в контейнере "menu"
m2=d.getElementById("menu").getElementsByTagName("a");
k2=m2.length;
m1=[];
//отлавливаем только нужные ссылки, нужные имеют атрибут type со значением contA
while(k2--){if(m2[k2].type&&m2[k2].type=="contA"){m1.push(m2[k2]);}};
//все дивы на странице
m2=d.getElementById("contDivs").getElementsByTagName("div");
k1=Q.len=m1.length;
k2=m2.length;
while(k2--){
if(m2[k2].className=="contDiv"){//только дивы-контейнеры
k1--;
m1[k1].onclick=clikLink;//вешаем клик на ссылку
//ссылка на ссылку, ссылка на стили дива, высота дива
Q.elem.push([m1[k1], m2[k2].style, m2[k2].offsetHeight]);
m2[k2].style.display="none";}};
//alert(Q.elem.join('\n'));
 };
 
function clikLink(){
var k=Q.len;//сколько всего ссылок/кнопок
while(k--){
if(Q.elem[k][0]===this){//ищем в массиве кликнутый элемент
if(Q.ind===null){//первый раз, пока всё закрыто
Q.ind=Q.indC=k;
repetition("block");
showDiv();}
else{
Q.ind=k;
if(Q.indC==Q.ind){//повторный клик по одному элементу
if(Q.elem[k][1].display=="block"){hideDiv();}//закрыть кликнутый
else{repetition("block"); showDiv();}}//окрыть кликнутый
else{hideShowDiv();};//клик по другому элементу
return false;}}};
 };
 
function hideShowDiv(){//свернуть/развернуть
Q.hei-=Q.stepH;
if(Q.hei>0){//сворачиваем который развёрнут
Q.elem[Q.indC][1].height=Q.hei+'px';
setTimeout(hideShowDiv, Q.timH);}
else{
repetition("none");
Q.indC=Q.ind;//подставляем индекс кликнутого
repetition("block");
showDiv();};//разворачиваем свежекликнутый
 };
 
function hideDiv(){//сворачиваем
Q.hei-=Q.stepH;
if(Q.hei>0){
Q.elem[Q.indC][1].height=Q.hei+'px';
setTimeout(hideDiv, Q.timH);}
else{
repetition("none");
Q.indC=Q.ind;};//подставляем индекс кликнутого
 };
 
function showDiv(){//разворачиваем
Q.hei+=Q.stepS;
if(Q.hei<Q.elem[Q.indC][2]){
Q.elem[Q.indC][1].height=Q.hei+'px';
setTimeout(showDiv, Q.timS);}
else{Q.elem[Q.indC][1].height=Q.elem[Q.indC][2]+'px';};
 };
 
function repetition(s){
Q.hei=0;
Q.elem[Q.indC][1].height=0;
Q.elem[Q.indC][1].display=s;
 };
 
 })();

Сообщение от SuperAgent007

ну это я помойму уж слишком наглею )

да не очень, я даже сделал

Новые блоги и статьи Все статьи Все блоги /
Оттенки серого Argus19 18.03.2026 Оттенки серого Нашёл в интернете 3 прекрасных модуля: Модуль класса открытия диалога открытия/ сохранения файла на Win32 API; Модуль класса быстрого перекодирования цветного изображения в оттенки. . .	SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .
делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью	SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .

@SuperAgent007 1 / 1 / 1 Регистрация: 16.05.2012 Сообщений: 70

	Плавное увеличение высоты div 09.03.2013, 16:02. Показов 4401. Ответов 9 Метки нет (Все метки) На странице есть 4 ссылки в строчку нужно чтобы при нажатии на ссылку плавно под ней открывался div с контентом (текст + картинки) определенной высоты и шириной в страницу, так при нажатие на каждую из сылок должен открываться такой div а предыдущий открытый должен закрываться (width:0; height:0;). Помогите пожалуйста! Заранее спс 0

@SuperAgent007 1 / 1 / 1 Регистрация: 16.05.2012 Сообщений: 70
	10.03.2013, 21:01 [ТС]
	Спасибо большое!! Мажно сделать чтоб перед тем как откроется следующий div пред идущий закрывался (плавно уползая вверх) и только после этого открывался следующий 0

@SuperAgent007 1 / 1 / 1 Регистрация: 16.05.2012 Сообщений: 70
	13.03.2013, 23:59 [ТС]
	Спосибо! но в Web-kit не робит 0

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	14.03.2013, 07:04
	Все работает во всех браузерах, ие6, ие8, опера, лиса, гуглоподобные. Методом научного тыка удалось предположить, что css остался от предыдущей версии, а они разные. 1

@newJS 2436 / 1115 / 312 Регистрация: 23.06.2011 Сообщений: 3,529
	18.03.2013, 21:59
	дай реальный html который не работает, наверно придется переделать отлов нужных тегов по идее не должно быть "чужих" тегов в контейнере, но раз они есть, чё нить придумаем 1