Как показать\скрыть текст по клику?

LikeAPilot · November 20, 2007

Есть страничка. В ней список названий. Нужно чтобы при клике на название в этой же страничке под ним показывался дополнительный текст. По повторному клику исчезал.

=========================

название1

название2 (клик)(при повторном клике все блаблабла пропадают)

блаблабла

блабла бла

название3

=========================

Подскажите пожалуйста.

Dimitry Wolotko · November 20, 2007

Копать в сторону JS - а писать в лягушатник.

Vladiger · November 20, 2007

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle_show(id) {
	document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
</script>
</head>
<body>

<ul>
	<li>Название 1</li>
	<li onClick="toggle_show('bla-bla2')">Название 2
		<ul id="bla-bla2" style="display: none">
			<li>Бла Бла Бла</li>
			<li>Бла Бла Бла</li>
			<li>Бла Бла Бла</li>
		</ul>
	</li>
	<li>Название 3</li>
</ul>

</body>
</html>

LikeAPilot · November 20, 2007

огромное спасибо

D.S.Denton · November 20, 2007

у меня "стандартное решение" в заготовках выглядит так:

spoiler.js

function Show(x) {
 document.getElementById('exp_' + x).style.display = 'none';
 document.getElementById('col_' + x).style.display = 'inline';
 document.getElementById('block_' + x).style.display = 'block';
}
function Hide(x) {
 document.getElementById('exp_' + x).style.display = 'inline';
 document.getElementById('col_' + x).style.display = 'none';
 document.getElementById('block_' + x).style.display = 'none';
}

а в самом документе использую php-генерацию опять же шаблонной функцией:

<?php
// $link и $block массивы,
// первый - текст ссылки для разворачивания/сворачивания спойлера
// второй - содержимое собственно спойлерного блока
function make_spoiler($link,$block,$start) {
 $out = '';
 foreach($link as $i => $l) {
 // ссылку для разворачивания спойлера
 $out .= '<a id="exp_'.$start.'" class="spoiler_link" href="java script:Show('.$start.');">'.$link[$i].'</a>';
 // а это для сворачивания
 $out .= '<a id="col_'.$start.'" class="spoiler_link" href="java script:Hide('.$start.');" style="display:none;">'.$link[$i].'</a>';
 // содержимое спойлера
 $out .= '<div id="block_'.$start.'" class="spoiler" style="display:none;">'.$block[$i].'</div>';
 // увеличиваем счетчик, чтоб айди были разными
 $start++;
 } 
 return $out;
}
?>

соответственно когда надо вставить спойлеры на страницу, загоняем в массив и на странице просто пишем

<?php echo(make_spoiler($link,$block,0)); ?>

при последующем вызове чтоб не запутаться сколько уже спойлеров создано ранее и не указать неверное стартовое значение, юзаем такую конструкцию:

<?php
// создание второго куска кода со спойлерами
$start = (sizeof($link) - 1); // но разумеется не переопределяем массив ссылок ранее этого
// заполняем массивы
$link = array( ... );
$block = array( ... );
// и снова вызываем
make_spoiler($link,$block,$start);
?>

Dimitry Wolotko · November 20, 2007

D.S.Denton, хорошее решение, спасибо.

-Volt- · October 31, 2008

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript">
function toggle_show(id) {
	document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
</script>
</head>
<body>

<ul>
	<li>Название 1</li>
	<li onClick="toggle_show('bla-bla2')">Название 2
		<ul id="bla-bla2" style="display: none">
			<li>Бла Бла Бла</li>
			<li>Бла Бла Бла</li>
			<li>Бла Бла Бла</li>
		</ul>
	</li>
	<li>Название 3</li>
</ul>

</body>
</html>

такой вопрос, а как сделать, чтобы курсор менялся при наведении на "Название 2"

Sergey Polevich · November 12, 2008

такой вопрос, а как сделать, чтобы курсор менялся при наведении на "Название 2"

<li style="cursor:pointer;">Название 2</li>

Nekromancer · December 23, 2008

в 1м варианте когда нажимаешь на всякие бла-бла обратно сворачивается вся фишка :unsure: написалибы как исправить...

а в вариантах с ПхП и явой можно немного поподробнее, куда, что вставлять что вначале документа написать.

Edited December 23, 2008 by Nekromancer

Nekromancer · December 23, 2008

и вот ещё, "spoiler.js" это типо надо написать так или както подругому...

Victor Ananiev · December 24, 2008

Пыщ!

s0rr0w · December 24, 2008

Пыщ!
<script src="/js/spoiler.js" language="javascript">

Кик!

Edited December 24, 2008 by s0rr0w

Victor Ananiev · December 24, 2008

Headshot!!! :unsure:

Edited December 24, 2008 by Victor Ananiev

Nekromancer · December 25, 2008

пасибо%)

Nekromancer · December 26, 2008

<script src="/js/spoiler.js" type="text/javascript"></script>

помойму закрывающий тег ненужен...

kalyaka-malyaka · December 26, 2008

Цитата
<script src="/js/spoiler.js" type="text/javascript"></script>
помойму закрывающий тег ненужен...

нужен

Nekromancer · December 26, 2008

а если загружать с другово документа, то типо так надо

kalyaka-malyaka · December 26, 2008

а если загружать с другово документа, то типо так надо
<link src="/js/spoiler.js" type="text/javascript">

почему?

Nekromancer · December 26, 2008

ну а как я хз :unsure: я типо спросил)

Nekromancer · December 27, 2008

вот хоть я этот код и стырил...

но он лучше всего помойму подходит...

<html>
<head>
<script language="JavaScript">
var SiteUrl = '/';
var ImgUrl = '/img/';

var MainShow = 0;

var Buttons = new Array();
Buttons[0] = new Image();
Buttons[1] = new Image();
Buttons[2] = new Image();
Buttons[3] = new Image();
Buttons[4] = new Image();
Buttons[0].src = ImgUrl+'menu_button.jpg';
Buttons[1].src = ImgUrl+'menu_button_over.jpg';
Buttons[2].src = ImgUrl+'31.jpg';
Buttons[3].src = ImgUrl+'search_button_over.jpg';
Buttons[4].src = ImgUrl+'menu2_bg.jpg';

function menu1click(id)
{
 if (MainShow != id)
 {
 //close MainShow
 if (MainShow != 0)
 {
 if (document.getElementById('m2_'+MainShow)) document.getElementById('m2_'+MainShow).style.display = 'none';
 document.getElementById('m1_'+MainShow).style.backgroundImage="url("+ImgUrl+"menu_button.jpg)";
 }
 //open current
 if (document.getElementById('m2_'+id)) document.getElementById('m2_'+id).style.display = '';
 document.getElementById('m1_'+id).style.backgroundImage="url("+ImgUrl+"menu_button_over.jpg)";
 MainShow = id;
 }
 else
 {
 //close MainShow
 if (document.getElementById('m2_'+MainShow)) document.getElementById('m2_'+MainShow).style.display = 'none';
 document.getElementById('m1_'+id).style.backgroundImage="url("+ImgUrl+"menu_button.jpg)";
 MainShow = 0;
 }
}

function menu1over(id)
{
 if (MainShow != id) document.getElementById('m1_'+id).style.backgroundImage="url("+ImgUrl+"menu_button_over.jpg)";
 document.getElementById('menu3_div').style.visibility = 'hidden';
 return false;
}

function menu1out(id)
{
 if (MainShow != id) document.getElementById('m1_'+id).style.backgroundImage="url("+ImgUrl+"menu_button.jpg)";
 return false;
}

function menu2over(src, top, left)
{
 document.getElementById('menu3_td').innerHTML = document.getElementById(src).innerHTML;
 document.getElementById('menu3_div').style.visibility = 'visible';
 document.getElementById('menu3_div').style.top=top+'px';
 document.getElementById('menu3_div').style.left=left+'px';
 return false;
}

function menu3clear()
{
 document.getElementById('menu3_div').style.visibility = 'hidden';
 return false;
}

function Registration()
{
 open(SiteUrl+'account/create/', '', 'status=1, toolbar=0, resizable=0, scrollbars=1, width=1024, height=800');
 return false;
}

function Login()
{
 open(SiteUrl+'account/login/', '', 'status=1, toolbar=0, resizable=0, scrollbars=1, width=800, height=650');
 return false;
}
</script>
</head>
<body>
<table width="156" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td id="m1_3" class="menu_button" width="156" valign="middle" height="27" align="center" onmouseout="return menu1out(3);" onmouseover="return menu1over(3);" style="background-image: url(/img/menu_button.jpg);">
<a class="menu_link" onfocus="this.blur();" onclick="menu1click(3); return false;" href="#">НОВОСТИ</a>
</td>
</tr>
<tr id="m2_3" style="display: none;">
<td width="156" valign="middle" align="left">
<table width="137" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" href="#">ДАЙДЖЕСТ</a>
</td>
</tr>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" href="#">СОБЫТИЯ</a>
</td>
</tr>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" href="#">ОБНОВЛЕНИЯ</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td id="m1_6" class="menu_button" width="156" valign="middle" height="27" align="center" onmouseout="return menu1out(6);" onmouseover="return menu1over(6);">
<a class="menu_link" onfocus="this.blur();" onclick="menu1click(6); return false;" href="#">СООБЩЕСТВО</a>
</td>
</tr>
<tr id="m2_6" style="display: none;">
<td width="156" valign="middle" align="left">
<table width="137" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" onclick="return false;" href="#">СТАТИСТИКА</a>
</td>
</tr>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" onclick="return false;" href="#">КЛАНЫ</a>
</td>
</tr>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" onclick="return false;" href="#">ФАН-САЙТЫ</a>
</td>
</tr>
<tr>
<td width="19" height="19"/>
<td class="menu_button2" width="137" valign="top" height="19" align="center">
<a class="menu_link2" onclick="return false;" href="#">РЕЙТИНГИ</a>
</td>
</tr>
</tbody>
</table>
</td>
</tr>

</tbody>
</table>
</body>
</html>

тупо можно копирнуть и подстовлять текст и сслыки которые нужны.

veb · December 29, 2008

Я в дримвейвере вчера эту фишку для текста попробовал применить. В разделе behaviors - AppearFade

Скрывает картинки, текст. Сам создает папки со стилями.

Nekromancer · December 29, 2008

Сам создает папки со стилями.

в смысле? Вивер сам мутит такой прикол типо из шаблона?

Edited December 29, 2008 by Nekromancer

Mila · December 29, 2008

У меня почему то ни один из приведенных скриптов не работает. Браузер FF.

Хотелось бы понять почему: то ли браузер глючит, то ли ошибки в коде.

Edited December 29, 2008 by Mila

veb · December 29, 2008

в смысле? Вивер сам мутит такой прикол типо из шаблона?

Да, именно так. Там всякие бехавиорз есть, но внедрять непосредственно на сайт в контент ещё не пробовал.

Nekromancer · December 29, 2008

надо будет помучать его что он может)

мой код работает точно) просто скинь в какойто текстовый файл поменяй расширение на html

потом просто стили, картинки и таблица настрой под себя... это в хтил коде идёт а не в джава так что по идее очень просто

maximym67 · August 30, 2009

<li style="cursor:pointer;">Название 2</li>

а куда это вставлять??

Sign In

Как показать\скрыть текст по клику?

Question

Link to comment

Share on other sites

36 answers to this question

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Обсуждения

Important Information