Скрытие элементов на JS

[alex_89]

Я написал скрипт

function showKabinetWindow() 
 {
  document.getElementById("kabinet").style.display="block"; 
  var hs=document.getElementById("hide_kabinet");
  hs.innerHTML='<img src="minus1.png">';
  hs.onclick=hideKabinetWindow;
 }
 function hideKabinetWindow() 
 {
   document.getElementById("kabinet").style.display="none";
    var hs=document.getElementById("hide_kabinet");
   hs.innerHTML='<img src="plus.png">';
   hs.onclick=showKabinetWindow;
   hs.style.display="block";
   };
 
   
   document.getElementById("hide_kabinet").onclick= function() {hideKabinetWindow(); return false};

НТML код

<table>
...........
 <tr>
	            <td class="head_kabinet">Редактировать профиль:</td>
            </tr>
			<tr>
			     <td class="head_kabinet2">Редактировать Аватар:
				 <a style="float:right; margin-top:-12px;" href="#" id="hide_kabinet"><img src="minus.png"> </a></td>
            </tr>
			
            <tr id="kabinet" >
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить аватар(не обязательно):</div>
						<div><input type="file"  size="30"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>
			<tr>
			     <td class="head_kabinet2">Редактировать ФИО:
				  <a  style="float:right;"href="#" id="hide_kabinet2"> вв</a>
				 </td>
            </tr>
			
            <tr id="kabinet2">
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить ФИО(не обязательно):</div>
						<div><input type="text"  size="60"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>	
			<tr>
			     <td class="head_kabinet2">Редактировать телефон:</td>
            </tr>
			
            <tr>
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить телефон(не обязательно):</div>
						<div><input type="text"  size="60"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>

Скрипт необходим для скрытия элементов формы : при щелчке по картинке -исчезает,нажав еще раз она появляется! ПРОБЛЕМА: как сделать чтобы скрипт работал для скрытия не 1 элемента(изменить аватар), а скрывал по своевременному нажатию: элементы (редактировать телефон и фио)

[ksa]

как сделать чтобы скрипт работал для скрытия не 1 элемента(изменить аватар), а скрывал по своевременному нажатию: элементы (редактировать телефон и фио)

Как вариант, сунь все элементы в один родительский, а потом скрывай его.

P.S.
Пример лучше делать полный, так его можно даже тут запустить и посмотреть...

[alex_89]

Если сунуть в родительский, то будут скрываться все элементы, а мне нужно чтобы если надо скрыть 1 элемент то 1 клик, если 2 элемент то клик на другой ссылке.И при этом у меня после нажатия на ссылке "показать" меня перекидывает в верх страницы, а форма у меня в центре страницы.
Полный код скрипта и html:

<form>
        <table  width="480px;" class="t" align="center" border="0" cellpadding="4" cellspacing="0">
          <tbody>
            <tr>
	            <td class="head_kabinet">Редактировать профиль:</td>
            </tr>
			<tr>
			     <td class="head_kabinet2">Редактировать Аватар:
				 <a style="float:right; margin-top:-12px;" href="#" id="hide_kabinet">скрыть </a></td>
            </tr>
			
            <tr id="kabinet" >
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить аватар(не обязательно):</div>
						<div><input type="file"  size="30"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>
			<tr>
			     <td class="head_kabinet2">Редактировать ФИО:
				  <a  style="float:right;"href="#" id="hide_kabinet"> скрыть</a>
				 </td>
            </tr>
			
            <tr id="kabinet">
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить ФИО(не обязательно):</div>
						<div><input type="text"  size="60"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>	
			<tr>
			     <td class="head_kabinet2">Редактировать телефон:</td>
            </tr>
			
            <tr>
                <td>
                       
                      
             
			              <div class="t_text2"> <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

                           
						                 
       <fieldset class="kabinet_form">
			  
						<div>Изменить телефон(не обязательно):</div>
						<div><input type="text"  size="60"  /></div>
		</fieldset>
                           </div>

				 </td>
			</tr>	      			
                         	 
	    
	<tr>	 
		 <td>
	      <div style="margin:5px" align="center">
			<input type="submit" class="kabinet_button"  value="Сохранить">
			<input type="reset"  class="kabinet_button2" value="Сброс" >
		  </div>
       </td>
    </tr>
 
         </tbody>
      </table>
  </form>

внизу скрипт после кода вверху

<script text="JavaScript"> 
 
 function showKabinetWindow() 
 {
  document.getElementById("kabinet").style.display="block"; 
  var hs=document.getElementById("hide_kabinet");
  hs.innerHTML='скрыть';
  hs.onclick=hideKabinetWindow;
 }
 function hideKabinetWindow() 
 {
   document.getElementById("kabinet").style.display="none";
    var hs=document.getElementById("hide_kabinet");
   hs.innerHTML='показать';
   hs.onclick=showKabinetWindow;
   hs.style.display="block";
   };
 
   
   document.getElementById("hide_kabinet").onclick= function() {hideKabinetWindow(); return false};
  



  

 </script>

[ksa]

alex_89, сделай ты нормальный пример. Чего ты всё кусками какими-то выкладываешь... Да еще с кучей пустых строк.

P.S.
В функции можно параметры передавать, если чего...

[рони]

alex_89,
Мантра для медитации: id не должно повторятся в пределах страницы
...и возможный вариант

<!DOCTYPE html>
<html >
<head>
  <title></title>
</head>
<body>
  <form>
    <table width="480px;" class="t" align="center" border="0" cellpadding="4" cellspacing="0">
      <tbody>
        <tr>
          <td class="head_kabinet">Редактировать профиль:</td>
        </tr>

        <tr>
          <td class="head_kabinet2">Редактировать Аватар: <a style="float:right; margin-top:-12px;"
          href="#" id="kabinet" name="kabinet">скрыть</a></td>
        </tr>

        <tr id="hide_kabinet">
          <td>
            <div class="t_text2">
              <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

              <fieldset class="kabinet_form">
                <div>
                  Изменить аватар(не обязательно):
                </div>

                <div>
                  <input type="file" size="30" />
                </div>
              </fieldset>
            </div>
          </td>
        </tr>

        <tr>
          <td class="head_kabinet2">Редактировать ФИО: <a style="float:right;" href="#" id=
          "kabinet2" name="kabinet2">скрыть</a></td>
        </tr>

        <tr id="hide_kabinet2">
          <td>
            <div class="t_text2">
              <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

              <fieldset class="kabinet_form">
                <div>
                  Изменить ФИО(не обязательно):
                </div>

                <div>
                  <input type="text" size="60" />
                </div>
              </fieldset>
            </div>
          </td>
        </tr>

        <tr>
          <td class="head_kabinet2">Редактировать телефон:<a style="float:right;" href="#" id=
          "kabinet3" name="kabinet2">скрыть</a></td>
        </tr>

        <tr id="hide_kabinet3">
          <td>
            <div class="t_text2">
              <!--  СТИЛЬ ООБВОДКИ ВОКРУГ ФОРМЫ-->

              <fieldset class="kabinet_form">
                <div>
                  Изменить телефон(не обязательно):
                </div>

                <div>
                  <input type="text" size="60" />
                </div>
              </fieldset>
            </div>
          </td>
        </tr>

        <tr>
          <td>
            <div style="margin:5px" align="center">
              <input type="submit" class="kabinet_button" value="Сохранить" /><input type="reset"
              class="kabinet_button2" value="Сброс" />
            </div>
          </td>
        </tr>
      </tbody>
    </table>
  </form><script type="text/javascript">
 function hideKabinetWindow()
 {
   var obj =  document.getElementById("hide_"+this.id);
   var display = obj.style.display;
   obj.style.display = (display != "none")?"none":"block";
   this.innerHTML = (display != "none")?"показать":"скрыть";
   return false
   };


   document.getElementById("kabinet").onclick= hideKabinetWindow;
   document.getElementById("kabinet2").onclick= hideKabinetWindow;
   document.getElementById("kabinet3").onclick= hideKabinetWindow;
</script>
</body>
</html>

[alex_89]

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