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

@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

Новые блоги и статьи Все статьи Все блоги /
сукцессия 36. Делаю прогоны модели около порога бифуркации (превращения эндо микоризы в экто микоризу) anaschu 21.07.2026 СУКЦЕССИЯ МИКОРИЗ: КАК МАТЕМАТИКА ОБЪЯСНЯЕТ ПОДЗЕМНУЮ ВОЙНУ Мы привыкли думать, что лес — это деревья. А грибы — это то, что мы собираем в корзинку осенью. Но если заглянуть под землю, окажется,. . .	ИИ и человечность kumehtar 21.07.2026 Забавно, что общаясь с ИИ, я замечаю, насколько он высказывается умно, и насколько верит в людей. Он умеет прощать. Он знает как отвечать не обесценивая опыт других людей, даже если сам не верит. Он. . .	Нейтральные знания ..., ... чистая наука. Пока что-то проходит модерацию на Хабре, стоит развить мысль ... Hrethgir 20.07.2026 К таким радикальным взглядам я конечно в той публикации не приходил, но чтобы скоротать вечер, решил углубиться немного. 1. Почему показания термометра заряжены целью? Цель заложена в самом. . .	Установка нескольких штампов электронной подписи в строго определенных местах файла docx ВладимирСамохин 19.07.2026 (В!) Работа с Электронной подписью - это неотъемлемая часть современного документооборота. Но что делать, если нужно поставить несколько штампов электронной подписи в строго определенных местах. . .
сукцессия 35. Научная статья о проделанной работе anaschu 19.07.2026 Написал в формате латекс и пдф	Вангую, что это не пройдёт модерацию, и на неделе я запущу свой сервер. Hrethgir 19.07.2026 Эта публикация сейчас в песочнице и ждёт приглашения. https:/ / habr. com/ ru/ sandbox/ 295048/ По ссылке 403. Не очень информативно такую ссылку постить. Запись от Usaga размещена Сегодня в 06:46 . . .	сукцессия 33. открытые вопросы от клауде anaschu 19.07.2026 "Что накопилось за эту часть А — тринадцать правок, из которых шесть пришли из ваших вопросов и каждая оказалась реальной ошибкой, а не калибровкой: односторонний симбиоз, отсутствующий листопад,. . .	32 сукцессия anaschu 19.07.2026 сукцессия 28‑мерное ядро стабилизировано Коллеги, фиксирую разбор инженерных правок и их изоморфную проекцию на экономику, меметику и половой отбор. Модель теперь не «подкручивает» сходимость —. . .

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

	Дополнительная информация 03.06.2010, 13:39. Показов 3042. Ответов 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

Опции темы