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

LikeAPilot · November 20, 2007

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

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

название1

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

блаблабла

блабла бла

название3

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

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

ExTRANE · November 29, 2009

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

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

<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>

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

Можно вопрос а как можно зделать чтоб при нажатии на кнопку панелька закрывалась а не открывалась?!)

RussianQuaker · December 16, 2010

Добрый день . Показываю что сейчас есть, без подробностей контента, только макет:

<script><!--   
function Sim_Sim_Otkroysya()   
{   
   var obj=document.getElementById('Sim_Sim');   
   if(obj.style.display=='none')   
   obj.style.display='block';   
   else   
   obj.style.display='none';   
} 
--></script> 

<DIV><A href='java script: Sim_Sim_Otkroysya()'><b>Раскрыть</b></A></DIV>
<DIV Name=Sim_Sim ID=Sim_Sim Style='text-indent:0pt;display:none'>Содержимое</DIV>

Результат (уже с контентом, естественно) можно узреть на http://russianquaker.ucoz.ru - по надписи "О чём сайт?" и картинке-плюсику слева от неё.

А я вот хочу сделать несколько раскрывающихся пунктов. Но... Как сделать так, чтобы при раскрытии одного пункта автоматически закрывались другие уже открытые ранее пункты?

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

<script><!-- 

function Sim_Sim_Otkroysya() 
{ 
 var obj=document.getElementById('Sim_Sim'); 
 if(obj.style.display=='none') 
 obj.style.display='block'; 
 else 
 obj.style.display='none'; 
} 

function Sim_Sim_Otkroysya2() 
{ 
 var obj=document.getElementById('Sim_Sim2'); 
 if(obj.style.display=='none') 
 obj.style.display='block'; 
 else 
 obj.style.display='none'; 
} 

function Sim_Sim_Otkroysya3() 
{ 
 var obj=document.getElementById('Sim_Sim3'); 
 if(obj.style.display=='none') 
 obj.style.display='block'; 
 else 
 obj.style.display='none'; 
} 
--></script>

<DIV>

<A href='java script: Sim_Sim_Otkroysya()'>Раскрыть-1</A>

<A href='java script: Sim_Sim_Otkroysya2()'>Раскрыть-2</A>

<A href='java script: Sim_Sim_Otkroysya3()'>Раскрыть-3</A>

</DIV>

<DIV Name=Sim_Sim ID=Sim_Sim Style='text-indent:0pt;display:none'>Содержимое-1</DIV>
<DIV Name=Sim_Sim ID=Sim_Sim2 Style='text-indent:0pt;display:none'>Содержимое-2</DIV>
<DIV Name=Sim_Sim ID=Sim_Sim3 Style='text-indent:0pt;display:none'>Содержимое-3</DIV>

Как его модифицировать для таких целей? :facepalmxd:

Foto Life · January 31, 2011

А вот такой вопрос:

<script type="text/javascript">
function toggle_show(id) {
document.getElementById(id).style.display = document.getElementById(id).style.display == 'none' ? 'block' : 'none';
}
</script>
<ul>
<li onClick="toggle_show('hide-text')" style="cursor:pointer;">Показать текст</font>
<ul id="hide-text" style="display: none">

Текст который скрывается, будет виден поисковым системам?

Edited January 31, 2011 by Foto Life

Vlad · January 31, 2011

Виден. Поисковики не разбирают скрипты и не запускают их, они смотрят код страницы.

Foto Life · January 31, 2011

Виден. Поисковики не разбирают скрипты и не запускают их, они смотрят код страницы.

Спасибо!

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

Выше указанный код не подошел по той причине что он создавал такой знак ► на против текстовой кнопки hide, который мне не удалось убрать.

<script type="text/javascript">

Текст Текст Текст Текст

" });</script>

Edited January 31, 2011 by Foto Life

Int · January 31, 2011

<ul>
<li onClick="toggle_show('hide-text')" style="cursor:pointer;">Показать текст</font>
<ul

Блевал.

Не нужны маркеры - не используй списки, проблем-то.

Andyk · February 6, 2011

<!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>

Отлично решение. А как сделать что бы по умолчанию скрытые елементы были видны ну и закрывались/открывались по клику.

Int · February 6, 2011

display:block задать

Andyk · February 7, 2011

мде, стоило чуть внимательнее глянуть

спасибо

Last person · November 15, 2011

Для каждого вопроса создается новая тема. Не надо писать в чужих ветках.

Edited November 15, 2011 by Softlink

Nekromancer · November 15, 2011

Зачем вот откопали эту тему? <_<

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

Join the conversation

Обсуждения

Important Information