HTML+CSS+JavaScript

Здравствуйте. Подскажите пожалуйста:
Есть ссылка при клике на которую - выпадают скрытые поля.
Как сделать чтоб они еще и закрывались при клике (в открытом состоянии)?

<form>  <!-- Видно сразу -->  <input><br>  <textarea></textarea><br>  <input><br>  <!--  -->  <a href="#" onclick="document.getElementById ('hid_1').style.display = 'block'; return false">Доп.информация</a>  <!-- Поначалу не видно -->  <div id="hid_1" style="display: none">  <input><br>  <textarea></textarea><br>  <input><br>  </div>  <!--  -->  </form>

Можно начать отталкиваться от следующего скрипта

<script>   function showhide()   {     var obj = document.getElementById ('hid_1')     if(obj.style.display == 'none')     {       obj.style.display = 'block';     }     else     {       obj.style.display = 'none';     }     return false;   } </script> <form>   <!-- Видно сразу -->   <input><br>   <textarea></textarea><br>   <input><br>   <!--  -->   <a href="#" onclick="return showhide()">Доп.информация</a>   <!-- Поначалу не видно -->   <div id="hid_1" style="display: none">   <input><br>   <textarea></textarea><br>   <input><br>   </div>   <!--  -->   </form>

Здорово! :)
Еще такая проблема: если ссылка расположениа ниже экрана(нужно "скролить" до ниё), то при нажатии страница подымается наверх, и ннужно опять спускаться вниз.

Можно как то зделать чтоб не было такого неудобства, може задать ссылку не через <a href=""> </a> , а через <div id=" " > </div> путем CSS?

>Еще такая проблема: если ссылка расположениа ниже экрана(нужно "скролить" до ниё), то при нажатии страница подымается наверх, и ннужно опять спускаться вниз.
>Можно как то зделать чтоб не было такого неудобства, може задать ссылку не через <a href=""> </a> , а через <div id=" " > </div> путем CSS

Оказывается прагало в мною приведенном примере, в Вашем - все нормально.(не прыгает наверх)! Еще раз спасибо!

А как еще можно сделать так, чтобы при обновлении страници, пункты не сворачиволись а оставались бы отображенными (но только те по которым клинули)?

function showhide()    {      var obj = document.getElementById ('hid_1')      if(obj.style.display == 'none')      {        obj.style.display = 'block';      }      else      {        obj.style.display = 'none';      }      return false;    }  </script>

Только через куки - записывать в них информацию о состоянии меню при каждом клике.
А при загрузке страницы - читать куки и соответственно менять стили.

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

Такая трудность появилась.

У меня несколько объектов на странице (открывающиеся по клику)
у каждого своё ('h1'), ('h2') , ... ('h10')

<script>    function showhide()    {      var obj = document.getElementById ('h1')      if(obj.style.display == 'none')      {        obj.style.display = 'block';      }      else      {        obj.style.display = 'none';      }      return false;    }  </script> /////////// <script>    function showhide()    {      var obj = document.getElementById ('h2')      if(obj.style.display == 'none')      {        obj.style.display = 'block';      }      else      {        obj.style.display = 'none';      }      return false;    }  </script> и тд..

Проблема в том что при клике на любую, выводится только последнее ('h10').

Функция с таким названием должна быть только одна. Передайте идентификатор через параметр функции.

<script>     function showhide(id)     {       var obj = document.getElementById (id)       if(obj.style.display == 'none')       {         obj.style.display = 'block';       }       else       {         obj.style.display = 'none';       }       return false;     }   </script>

Можно начать отталкиваться от следующего скрипта

<script>   // В зависимости от состояния cookie   // Устнавливаем перевоначальное значение   function loadpage()   {     var obj = document.getElementById ('hid_1');     if(obj)     {       var cookie = getcookie("hid_1");       if(cookie == "1")        {         obj.style.display = 'block';       }       else       {         obj.style.display = 'none';       }     }   }   // Обработчик клика по ссылке   function showhide()   {     var obj = document.getElementById ('hid_1');     if(obj.style.display == 'none')     {       obj.style.display = 'block';       setcookie("hid_1", 1);     }     else     {       obj.style.display = 'none';       setcookie("hid_1", 0);     }     return false;   }   // Устанавливаем cookie   function setcookie(name, val)   {     var putdate = new Date();     // Устанавливаем cookie на год     putdate.setTime(putdate.getTime() + (86400 * 365));     document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() +  "; path=/";   }   // Извлекаем cookie   function getcookie(name)   {     var re = new RegExp(name + "=([\\d])", "i");     arr = re.exec(document.cookie);     return arr[1];   } </script> <html> <body onload='loadpage()'> <form>   <!-- Видно сразу -->   <input><br>   <textarea></textarea><br>   <input><br>   <!--  -->   <a href="#" onclick="return showhide()">Доп.информация</a>   <!-- Поначалу не видно -->   <div id="hid_1" style="display: none">   <input><br>   <textarea></textarea><br>   <input><br>   </div>   <!--  -->   </form>    </body> </html>

Работает если ссылка одна, а у меня несколько ссылок и в каждой есть onclick="return showhide()", и при клике ссылке по прежнему не различаются, на какую бы не кликал реагирует только последняя скрытая часть hid_2 ....

<script>    // В зависимости от состояния cookie    // Устнавливаем перевоначальное значение    function loadpage()    {      var obj = document.getElementById ('hid_1');      if(obj)      {        var cookie = getcookie("hid_1");        if(cookie == "1")         {          obj.style.display = 'block';        }        else        {          obj.style.display = 'none';        }      }    }    // Обработчик клика по ссылке    function showhide()    {      var obj = document.getElementById ('hid_1');      if(obj.style.display == 'none')      {        obj.style.display = 'block';        setcookie("hid_1", 1);      }      else      {        obj.style.display = 'none';        setcookie("hid_1", 0);      }      return false;    }    // Устанавливаем cookie    function setcookie(name, val)    {      var putdate = new Date();      // Устанавливаем cookie на год      putdate.setTime(putdate.getTime() + (86400 * 365));      document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() +  "; path=/";    }    // Извлекаем cookie    function getcookie(name)    {      var re = new RegExp(name + "=([\\d])", "i");      arr = re.exec(document.cookie);      return arr[1];    }  </script>  //Второй параметр <script>    // В зависимости от состояния cookie    // Устнавливаем перевоначальное значение    function loadpage()    {      var obj = document.getElementById ('hid_2');      if(obj)      {        var cookie = getcookie("hid_2");        if(cookie == "1")         {          obj.style.display = 'block';        }        else        {          obj.style.display = 'none';        }      }    }    // Обработчик клика по ссылке    function showhide()    {      var obj = document.getElementById ('hid_2');      if(obj.style.display == 'none')      {        obj.style.display = 'block';        setcookie("hid_1", 1);      }      else      {        obj.style.display = 'none';        setcookie("hid_1", 0);      }      return false;    }    // Устанавливаем cookie    function setcookie(name, val)    {      var putdate = new Date();      // Устанавливаем cookie на год      putdate.setTime(putdate.getTime() + (86400 * 365));      document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() +  "; path=/";    }    // Извлекаем cookie    function getcookie(name)    {      var re = new RegExp(name + "=([\\d])", "i");      arr = re.exec(document.cookie);      return arr[1];    }  </script>  <body onload='loadpage()'> <a href="#" onclick="return showhide()">Автомобили</a>    <!-- Поначалу не видно -->    <div id="hid_1" style="display: none"> <div>Легковые</div> <div>Грузовые</div>    </div>    <br/> <a href="#" onclick="return showhide()">Недвижимость</a>    <!-- Поначалу не видно -->    <div id="hid_2" style="display: none"> <div>Дома</div> <div>Дачи</div>    </div>

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

<script>     // В зависимости от состояния cookie     // Устнавливаем перевоначальное значение     function loadpage()     {       load("hid_1");     load("hid_2");   }   function load(id)   {     var obj = document.getElementById (id);       if(obj)       {         var cookie = getcookie(id);         if(cookie == "1")          {           obj.style.display = 'block';         }         else         {           obj.style.display = 'none';         }       }     }   // Обработчик клика по ссылке     function showhide(id)     {       var obj = document.getElementById (id);       if(obj.style.display == 'none')       {         obj.style.display = 'block';         setcookie(id, 1);       }       else       {         obj.style.display = 'none';         setcookie(id, 0);       }       return false;     }     // Устанавливаем cookie     function setcookie(name, val)     {       var putdate = new Date();       // Устанавливаем cookie на год       putdate.setTime(putdate.getTime() + (86400 * 365));       document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() +  "; path=/";     }     // Извлекаем cookie     function getcookie(name)     {       var re = new RegExp(name + "=([\\d])", "i");       arr = re.exec(document.cookie);       return arr[1];     }   </script>   <body onload='loadpage()'>  <a href="#" onclick="return showhide('hid_1')">Автомобили</a>     <!-- Поначалу не видно -->     <div id="hid_1" style="display: none">  <div>Легковые</div>  <div>Грузовые</div>     </div>     <br/>  <a href="#" onclick="return showhide('hid_2')">Недвижимость</a>     <!-- Поначалу не видно -->     <div id="hid_2" style="display: none">  <div>Дома</div>  <div>Дачи</div>     </div>

Да, теперь работает.
Спасибо за Ваше терпение и знания. :))

. А как можно еще добавить в этот скрипт Чекбоксы тоже на cookies.
На чекбоксах стоит функция , кликаешь по его описанию ( по ссылке) и он отмечается, только страница прыгает в верх..., и нужно еще чтоб если отмечен кликаешь-отметка снимается

..... <body onload='loadpage()'>   <a href="#" onclick="return showhide('hid_1')">Автомобили</a>      <!-- Поначалу не видно -->      <div id="hid_1" style="display: none">   <div><input name="n_1" type="checkbox" value='' id='h1' /><a class='at_5' href='#' onclick="document.getElementById('h1').checked = this.value !== ''">Легковые</a></div>   <div><input name="n_1" type="checkbox" value='' id='h2' /><a class='at_5' href='#' onclick="document.getElementById('h2').checked = this.value !== ''">Грузовые</a></div>      </div>      <br/>   <a href="#" onclick="return showhide('hid_2')">Недвижимость</a>      <!-- Поначалу не видно -->      <div id="hid_2" style="display: none">   <div><input name="n_1" type="checkbox" value='' id='h3' /><a class='at_5' href='#' onclick="document.getElementById('h3').checked = this.value !== ''">Дома</a></div>   <div><input name="n_1" type="checkbox" value='' id='h4' /><a class='at_5' href='#' onclick="document.getElementById('h4').checked = this.value !== ''">Дачи</a></div>      </div>

Можно модифицировать скрипт следующим образом

<script>     // В зависимости от состояния cookie     // Устнавливаем перевоначальное значение     function loadpage()     {       loadlnk("hid_1");     loadlnk("hid_2");     loadchk("h1");     loadchk("h2");     loadchk("h3");     loadchk("h4");   }   function loadlnk(id)   {     var obj = document.getElementById (id);       if(obj)       {         var cookie = getcookie(id);         if(cookie == "1")          {           obj.style.display = 'block';         }         else         {           obj.style.display = 'none';         }       }     }   function loadchk(id)   {     var obj = document.getElementById (id);       if(obj)       {         var cookie = getcookie(id);         if(cookie == "1")          {           obj.checked = true;         }         else         {           obj.checked = false;         }       }     }   // Обработчик клика по ссылке     function showhide(id)     {       var obj = document.getElementById (id);       if(obj.style.display == 'none')       {         obj.style.display = 'block';         setcookie(id, 1);       }       else       {         obj.style.display = 'none';         setcookie(id, 0);       }       return false;     }     // Обработка клика по ссылке   function lnkcheckunckeck(id)   {     var obj = document.getElementById (id);       if(obj.checked)       {         obj.checked = false;       }       else       {         obj.checked = true;       }     // Запоминаем состояние в cookie     checkunckeck(id);     return false;     }   // Обработка клика по флажку (запоминаем состояние в cookie)   function checkunckeck(id)   {     var obj = document.getElementById (id);       if(obj.checked)       {         setcookie(id, 1);       }       else       {         setcookie(id, 0);       }     return false;     }   // Устанавливаем cookie     function setcookie(name, val)     {       var putdate = new Date();       // Устанавливаем cookie на год       putdate.setTime(putdate.getTime() + (86400 * 365));       document.cookie = name + "=" + val + "; expires=" + putdate.toGMTString() +  "; path=/";     }     // Извлекаем cookie     function getcookie(name)     {       var re = new RegExp(name + "=([\\d])", "i");       arr = re.exec(document.cookie);       return arr[1];     }   </script>   <body onload='loadpage()'>  <a href="#" onclick="return showhide('hid_1')">Автомобили</a>       <!-- Поначалу не видно -->       <div id="hid_1" style="display: none">    <div><input name="n_1" type="checkbox" value='' onclick='checkunckeck("h1");' id='h1' /><a class='at_5' href='#' onclick='lnkcheckunckeck("h1");'>Легковые</a></div>    <div><input name="n_1" type="checkbox" value='' onclick='checkunckeck("h2");' id='h2' /><a class='at_5' href='#' onclick='lnkcheckunckeck("h2");'>Грузовые</a></div>       </div>       <br/>    <a href="#" onclick="return showhide('hid_2')">Недвижимость</a>       <!-- Поначалу не видно -->       <div id="hid_2" style="display: none">    <div><input name="n_1" type="checkbox" value='' onclick='checkunckeck("h3");' id='h3' /><a class='at_5' href='#' onclick='lnkcheckunckeck("h3");'>Дома</a></div>    <div><input name="n_1" type="checkbox" value='' onclick='checkunckeck("h4");' id='h4' /><a class='at_5' href='#' onclick='lnkcheckunckeck("h4");'>Дачи</a></div>       </div>

PS Если еще что-то требуется, давайте в новой теме, а то эта уже слишком длинная :)))