Как создать скрытый открываемый текстовый блок.

AlexeyMenshikov · 19.03.2008, 18:27

Есть необходимость создать сабж.

Т.е. например, как на раздачах тут - http://torrents.ru/forum/viewtopic.php?t=669212

есть там в описание ссылка типа "скриншоты [+]", щелкаешь на плюсик и открывается блок где картинки, текст...

Как реализовать данный сабж, желательно средствами CSS, а не JS.

Спасибо!

Йожег · 19.03.2008, 18:40

по ссылке региться надо, что собственно особенно лень под конец рабочего дня, если ты про своиства display: none; (block

то без JS это не реально, собственно это и показывает/скрывает блок, например идБлока.style.display = 'none' - скрыть

AlexeyMenshikov · 20.03.2008, 03:28

А есть пример где-то работающий, а то ту страницу разбирать анриал.

Йожег · 20.03.2008, 11:33

Код:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script language="javascript">
function clicks(){
div = document.getElementById('divID').style
	if(div.display == 'block') {
	div.display = 'none'
	}else{
	div.display = 'block'
	}
}
</script>
</head>

<body>
<a onclick="clicks()" style="cursor:pointer;">показать</a>
<div style="display:none;" id="divID">скрытый текст</div>
</body>

порядок проверки лучше именно такой оставить чтоб небыло бага оперы с двойным кликом... так и не понял почему она косячит

AlexeyMenshikov · 20.03.2008, 23:45

Спасибо, заработало. Но вот доп.вопрос:

У меня показывается на страничке по многу карточек с фильмами и к каждой карточке надо такой скрытый блок.

Т.е. например я меняю код так:

Код:

 php:
print "<a onclick=\"clicks()\" style=\"cursor:pointer;\">показать</a> ";
print "<div style=\"display:none;\" id=\"div$filmid\">скрытый текст</div> ";

И в каждой карточке этот код будет со своим id, наример id="div76"

А как модифицировать JS под такую систему? Я просто в JS не очень..

Спасибо!

Йожег · 21.03.2008, 10:49

Код:

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<script language="javascript">
function clicks(divID){
div = document.getElementById(divID).style
	if(div.display == 'block') {
	div.display = 'none'
	}else{
	div.display = 'block'
	}
}
</script>
</head>

<body>
<a onclick="clicks('divID1')" style="cursor:pointer;">показать</a>
<div style="display:none;" id="divID1">скрытый текст</div>

<a onclick="clicks('divID2')" style="cursor:pointer;">показать</a>
<div style="display:none;" id="divID2">скрытый текст</div>

<a onclick="clicks('divID3')" style="cursor:pointer;">показать</a>
<div style="display:none;" id="divID3">скрытый текст</div>

<a onclick="clicks('divID4')" style="cursor:pointer;">показать</a>
<div style="display:none;" id="divID4">скрытый текст</div>
</body>

чтот вроде такого?

AlexeyMenshikov · 21.03.2008, 21:45

Цитата:

Сообщение от Йожег

чтот вроде такого?

Оп! Заработало всё! Спасибо!!