Изменить заголовок метки для Показать / Скрыть Javascript

Question

http://jsfiddle.net/YaMhn/8/

^^^^ Посмотрите, можете ли вы помочь решить эту проблему

Хорошо, поэтому я добавил ярлык в свой скрипт

function showHide(lbl)
{
if(document.getElementById('mydiv').style.display == "none")
{
    lbl.innerHTML="Hide";
    document.getElementById('mydiv').style.display="";
}
else
{
    lbl.innerHTML="Show";
    document.getElementById('mydiv').style.display="none";
}
}

function showhide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "none";
} else {
  obj.style.display = "";
}
  }
}

function hide(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "none") {
  obj.style.display = "none";
} else {
  obj.style.display = "none";
}
  }
}

function hideall(id1,id2,id3,id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display; 
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
hide(id1);  hide(id2); hide(id3); hide(id4); return;
  }
}

function show(id) {
  if (document.getElementById) {
obj = document.getElementById(id);
if (obj.style.display == "") {
  obj.style.display = "";
} else {
  obj.style.display = "";
}
  }
}

function showall(id1,id2,id3, id4) {
  var status1 = document.getElementById(id1).style.display; 
  var status2 = document.getElementById(id2).style.display; 
  var status3 = document.getElementById(id3).style.display; 
  var status4 = document.getElementById(id4).style.display;
  if ((status1 == 'none') || (status2 == 'none') || (status3 = 'none') || (status4 = 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
  if ((status1 != 'none') || (status2 != 'none') || (status3 != 'none') || (status4 != 'none')) {
show(id1);  show(id2); show(id3); show(id4); return;
  }
}

Вот мой код заголовка:

Header #1: (titled Runway Information    Click to Expand/Close)
<div style="background-color:black; width:80%; cursor:pointer;hand" onClick="showhide('id1'); return(false);"><table width="100%"><tr><td width=80% align=left><font color="white" size="4"><strong>&nbsp;Runway Information</strong></font></td><td align=right><div id='mydiv' style='display:none'></div></td></tr></table></div>

Заголовок работает идеально, показывает и скрывает, как я кодировал. Но я хочу, чтобы оно показывало «Показать», когда скрыто, и «Скрыть», когда показано.

Ранее это было написано так: Нажмите, чтобы развернуть / закрыть

Проблема в том, что новый showHide (lbl) не работает должным образом.

Что мне нужно изменить?

Answer 1

Это просто - используйте innerHTML:

style.display="block"
innerHTML="click here to expand"

и скрыть:

style.display="hide"
innerHTML="click here to close"

Answer 2

Единственное изменение, которое я сделал, было сделано иначе, если, и теперь оно исправлено.

http://jsfiddle.net/YaMhn/18/

Спасибо Ашрафу за помощь.Я бы проголосовал за тебя, но у меня есть только 13 представителей.

Answer 3

Я сделал тебе пример: http://jsfiddle.net/YaMhn/