Дополнительная информация

@qu13t · Регистрация: 02.06.2010

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

как сделать такую шнягу
чтобы при нажатии на "Дополнительная информация:"
ниже выдвигалась информация
Скрины.
первый скрин до нажатия, второй после нажатия.

@etalord · 03.06.2010, 22:48

вот так пашет, не знаю, насколько это рационально

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
<style type="text/css">
.hide {display: none;}
#otd1 {cursor:pointer; cursor:hand}
#otd2 {cursor:pointer; cursor:hand}
</style>
 
<script type="text/javascript">
function showhide(n)
{
 if (document.getElementById('otd'+n).style.display=='inline'){
 document.getElementById('otd'+n).style.display='none';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-plus.gif" />';
 }
 else{
 document.getElementById('otd'+n).style.display='inline';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-minus.gif" />';
 return false;
 }
}
</script>
 
<div id="otd2"><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация</a></div>
<div id="otd1" class="hide">
выдвигающийся текст
</div>

Добавлено через 1 минуту
style в status1 конечно лучше вынести к остальным стилям

@qu13t · 04.06.2010, 19:05 **[ТС]**

спасибо биг - работает

Добавлено через 19 часов 53 минуты
Мне надо два пункта чтобы было:
+ Дополнительная информация 1
+ Дополнительная информация 2
я сделал вот так.

Code
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
<style type="text/css">
.hide {display: none;}
.hide1 {display: none;}
#otd1 {cursor:pointer; cursor:hand}
#otd2 {cursor:pointer; cursor:hand}
#otd3 {cursor:pointer; cursor:hand}
#otd4 {cursor:pointer; cursor:hand}
</style>
 
<script type="text/javascript">
function showhide(n)
{
 if (document.getElementById('otd'+n).style.display=='inline'){
 document.getElementById('otd'+n).style.display='none';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-plus.gif" />';
 }
 else{
 document.getElementById('otd'+n).style.display='inline';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-minus.gif" />';
 return false;
 }
}
</script>
 
<div id="otd2"><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 1</a></div>
<div id="otd1" class="hide">
выдвигающийся текст 1
</div>
<div id="otd4"><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 2</a></div>
<div id="otd3" class="hide1">
выдвигающийся текст 2
</div>

при нажатие на "Дополнительная информация 2" выдвигается текст 1. что я не правильно сделал, помогите пожалуйста. То есть не выдвигается текст 2 при нажатии на "Дополнительная информация 2", а выдвигается за место его текст 1. как сделать правильно?

@etalord · 04.06.2010, 19:13

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
<style type="text/css">
.hide {display: none;}
.hide1 {display: none;}
#otd1 {cursor:pointer; cursor:hand}
#otd2 {cursor:pointer; cursor:hand}
#otd3 {cursor:pointer; cursor:hand}
#otd4 {cursor:pointer; cursor:hand}
</style>
 
<script type="text/javascript">
function showhide(n)
{
 if (document.getElementById('otd'+n).style.display=='inline'){
 document.getElementById('otd'+n).style.display='none';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-plus.gif" />';
 }
 else{
 document.getElementById('otd'+n).style.display='inline';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-minus.gif" />';
 return false;
 }
}
</script>
 
<div id="otd2"><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 1</a></div>
<div id="otd1" class="hide">
выдвигающийся текст 1
</div>
<div id="otd4"><a onclick="return showhide(3);"><div id="status3" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 2</a></div>
<div id="otd3" class="hide1">
выдвигающийся текст 2
</div>

Добавлено через 4 минуты
вообще посмтори вот так работать будет?

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
<style type="text/css">
.hide {display: none; cursor:pointer; cursor:hand}
</style>
 
<script type="text/javascript">
function showhide(n)
{
 if (document.getElementById('otd'+n).style.display=='inline'){
 document.getElementById('otd'+n).style.display='none';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-plus.gif" />';
 }
 else{
 document.getElementById('otd'+n).style.display='inline';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-minus.gif" />';
 return false;
 }
}
</script>
 
<div><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 1</a></div>
<div id="otd1" class="hide">
выдвигающийся текст 1
</div>
<div><a onclick="return showhide(2);"><div id="status2" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 2</a></div>
<div id="otd2" class="hide">
выдвигающийся текст 2
</div>

Добавлено через 2 минуты
второй вариант юзай )

@qu13t · 04.06.2010, 19:17 **[ТС]**

первый работает, спасибо) а второй тоже работает только пишет ещё html с верха и с низу. так как я код и так уже в страницу html вставляю вот оно и пишет.

@etalord · 04.06.2010, 19:21

вот тебе для 3 ))

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
<style type="text/css">
.hide {display: none; cursor:pointer; cursor:hand}
</style>
 
<script type="text/javascript">
function showhide(n)
{
 if (document.getElementById('otd'+n).style.display=='inline'){
 document.getElementById('otd'+n).style.display='none';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-plus.gif" />';
 }
 else{
 document.getElementById('otd'+n).style.display='inline';
 document.getElementById('status'+n).innerHTML='<img src="spoiler-minus.gif" />';
 return false;
 }
}
</script>
 
<div><a onclick="return showhide(1);"><div id="status1" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 1</a></div>
<div id="otd1" class="hide">
выдвигающийся текст 1
</div>
<div><a onclick="return showhide(2);"><div id="status2" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 2</a></div>
<div id="otd2" class="hide">
выдвигающийся текст 2
</div>
<div><a onclick="return showhide(3);"><div id="status3" style="float:left"><img src="spoiler-plus.gif" /></div>Дополнительная информация 3</a></div>
<div id="otd3" class="hide">
выдвигающийся текст 3
</div>

Добавлено через 57 секунд

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

только пишет ещё html с верха и с низу.

я просто сначала лишние теги вставил, копирни ещё раз второй вариант

@qu13t · 04.06.2010, 19:43 **[ТС]**

я этот сохраню на всякий случай, но пока и тот нормально работает) а лишние теги не мешают)

@etalord · 04.06.2010, 19:49

ну я так и понял, тебе главное - шоб работало

@R0ver · 15.09.2011, 20:02

кто подскажет как сделать чтобы по аналогии со здесь изложенным скриптом делать так, чтобы при нажатии на строку таблицы выезжал скрытый текст и таблица разьезжалась...
как тут: http://www.dst-team.ru/index/sostav_komandy/0-4 при нажатии на spitfire

Новые блоги и статьи Все статьи Все блоги /
Доктрина интенционального знания - Доктрина для портала "Срез". Hrethgir 25.07.2026 Может найдётся кто захочет оценить доктрину. . . Написания правил участия для меня роскошь, требующая лимита времени, поэтому все сообщения не прошедшие модерацию будут видны только участникам портала,. . .	сукцессия 44. Решил подать на припринт в межународные сервисы препринтов. Но нужно одобрение от ученых anaschu 25.07.2026 Английский вариант. Пока кто то не одобрит мою личность, мне не получиться это опубликовать на препринте. Но заявку на публикацию статьи я сегодня подам.	сукцессия 43. Вторая научная статья за месяц- прайминг и гатгил anaschu 25.07.2026 две стороны одной монеты	Более приземисто - Эстафету хвоста в .cdl (деревья эстафеты в сад). Hrethgir 24.07.2026 В будущем, после написания блока инверсии обхода дерева (эстафеты хвоста), я планирую вернуться к нашему прошлому разговору о том, обладают ли знания целеполаганием. Тогда я пришел к выводу, что. . .
Вот представьте что вам дали бессмертие. kumehtar 24.07.2026 Вот представьте что вам дали бессмертие, ничего более не меняя. Вообще ничего, только бессмертие в нынешнем виде. Рады были бы? Что бы вы тут делали всё это время? Никакой пенсии. Никакого нового. . .	сукцессия 41 anaschu 24.07.2026 Численная верификация бифуркации в агентной модели лесной сукцессии: от одного параметра к ансамблю Автор: пользователь @Shumilov_AS \| Раздел: Прикладная математика / Численные методы Кратко. . .	сукцессия 40. Ансамблевая кластерная параметризаци, часть 1. anaschu 24.07.2026 Пр# Сопровождение научной статьи ИИ-ассистентом: подготовка публикации и калибровка агентно-ориентированной модели сукцессии микоризных систем Полевые заметки о двухнедельной совместной работе. . .	Теория всего 12. ВГК на планете в стратегической игре "терра" anaschu 21.07.2026 ### Главные семантические изменения и дешифровка новой физики 1. `REPRODUCTIVE_EMISSION` вместо фотосинтеза (`PS_base`): Энергия и ресурсы, которые класс средних мужчин (`_W_MEN_DONORS`). . .

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81

	Дополнительная информация 03.06.2010, 13:39. Показов 3044. Ответов 27 Метки нет (Все метки) как сделать такую шнягу чтобы при нажатии на "Дополнительная информация:" ниже выдвигалась информация Скрины. первый скрин до нажатия, второй после нажатия. Миниатюры 0

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	04.06.2010, 19:17 [ТС]
	первый работает, спасибо) а второй тоже работает только пишет ещё html с верха и с низу. так как я код и так уже в страницу html вставляю вот оно и пишет. 0

@qu13t 0 / 0 / 0 Регистрация: 02.06.2010 Сообщений: 81
	04.06.2010, 19:43 [ТС]
	я этот сохраню на всякий случай, но пока и тот нормально работает) а лишние теги не мешают) 0

@etalord работяга 368 / 368 / 52 Регистрация: 23.05.2010 Сообщений: 947
	04.06.2010, 19:49
	ну я так и понял, тебе главное - шоб работало 0

@R0ver 0 / 0 / 0 Регистрация: 07.12.2016 Сообщений: 3
	15.09.2011, 20:02
	кто подскажет как сделать чтобы по аналогии со здесь изложенным скриптом делать так, чтобы при нажатии на строку таблицы выезжал скрытый текст и таблица разьезжалась... как тут: http://www.dst-team.ru/index/sostav_komandy/0-4 при нажатии на spitfire 0