HTML+CSS+JavaScript

Agronom: А я сделал так, без всяких переменных и функций:

<table border=1 cellspacing=2> <tr id=d0 onClick=this.style.display='none';document.all.d1.style.display=document.all.d2.style.display=''><td>(показать)</td></tr> <tr id=d1 style=display:none onClick=this.style.display=document.all.d2.style.display='none';document.all.d0.style.display=''><td>(скрыть)</td></tr> <tr id=d2 style=display:none><td>Содержимое.</td></tr> </table>

Чтобы менялся цвет,

<table border=1 cellspacing=2> <tr id=d0 onClick=this.style.display='none';document.all.d1.style.display=document.all.d2.style.display=''> <td onMouseOver=this.style.backgroundColor='#dddddd' onMouseOut=this.style.backgroundColor=''>(показать)</td></tr> <tr id=d1 style=display:none onClick=this.style.display=document.all.d2.style.display='none';document.all.d0.style.display=''> <td onMouseOver=this.style.backgroundColor='#dddddd' onMouseOut=this.style.backgroundColor=''>(скрыть)</td></tr> <tr id=d2 style=display:none><td>Содержимое.</td></tr> </table>

Чтобы писать поменьше,

<script>d=document; function ff(th,alt,cont,contVal){th.style.display='none';alt.style.display='';cont.style.display=contVal;} function mo(t){t.style.backgroundColor='#dddddd'} function mu(t){t.style.backgroundColor=''} </script> <table border=1 cellspacing=2> <tr id=d0 onClick=ff(this,d.all.d1,d.all.d2,'')> <td onMouseOver=mo(this) onMouseOut=mu(this)>(показать)</td></tr> <tr id=d1 style=display:none onClick=ff(this,d.all.d0,d.all.d2,'none')> <td onMouseOver=mo(this) onMouseOut=mu(this)>(скрыть)</td></tr> <tr id=d2 style=display:none><td>Содержимое.</td></tr> </table>

Смотрите здесь:

http://softtime.ru/forum/read.php?id_forum=4&id_theme=6965&page=1

А еще вопрос вот у меня строка <TR class='1'><TD>...</TD></TR>
Как сделать чтобы при наведении мышки цвет строки менялся.

Строчка то исчезает.
Остаются борта самой таблицы, и это нормально.
Я думаю надо или изменить ширину бортов таблиц на 0, или контент отображать в отдельном DIV или же в отдельной таблице.

Спасибо. Почти то, что нужно - при нажатии на ссылку текст в строке появляется, при повторном исчезает. Но хотолось бы чтобы сама чтрока вместе с содержимым появлялась и исчезала, при этом соответственно, чтобы таблица тоже растягивалась, а потом сжималась.

И ещё, если при загрузке страницы, вы не хотите сразу отображать контент, смените стиль вашего TR.

<TR id='content' style="visibility:hidden ">

Измените функцию вот таким образом:

function hideContent(){      var v_content = document.getElementById("content");       v_content.style.visibility=(v_content.style.visibility==='visible'?'hidden':'visible'); }

Теперь проверьте.

Сделал так:

<script language=javascript> function hideContent(){   var v_content = document.getElementById("content");   v_content.style.visibility="hidden"; //&#229;&#241;&#235;&#232; &#237;&#224;&#228;&#238;, &#242;&#238; &#239;&#238;&#242;&#238;&#236;: "visible" } </script> <TABLE  align=center class='main_table' cellpadding=2 cellspacing=1>                <TR>               <TD align=center class='menu'>                  <a href='javascript:hideContent()'>ПОКАЗАТЬ</a>               </TD>              </TR>              <TR id='content'>               <TD>                СОДЕРЖИМОЕ               </TD>              </TR>         </TABLE>

При загрузке страницы появляется таблица с двумя строчками, в верхней ссылка, ниже СОДЕРЖИМОЕ, при нажатии на ссылку слово СОДЕРЖИМОЕ пропадает. Что делать? Мне надо чтобы при загрузке была верхняя строчка с сылкой , при нажатии на ссылку нижняя то появлялась то пропадала.

Надо еще в какой-то переменной хранить текущее состояние; либо завести два разных <tr></tr> - в одном "показать" в другом "спрятать", и менять их местами. То есть если таблица видима. выводим "спрятать", и вызываем функцию, прячущую контент; если невидима - то все наоборот.

Короче надо присвоить той части которую вам нужно то скрывать то отображать снова, id.

<tr id="content">   <td>fcsfsdfsdf</td> </tr>

Теперь ссылка с JavaScript:

<a href="javascript:hideContent()">hide content</a>

И функция:

function hideContent(){   var v_content = document.getElementById("content");   v_content.style.visibility="hidden"; //если надо, то потом: "visible"    }