HTML+CSS+JavaScript

По нажатию на закрытый ("+") блок "Поле 1", "Поле 2" и "Поле 3" раскрывалось все, что находиться в этих блоках. По нажатию на открытый ("-") контент блока скрывается. И еще, когда пользователь перезапускает браузер, должно сохранятся состояние этих блоков.
В прикрепленном файле все описано.

Помогите пожалуйста сделать такую задумку, т.к. сам я JS не знаю. Или подскажите где искать такой скрипт.
Спасибо.

смотреть AJAX, на форуме куча примеров!
Через AJAX отправить данные на сервер который сохранит состояние поля (открыто/закрыто) и при следующей загрузке проверять состояние поля!

Или можно сохранить через cookie состояние (открыто/закрыто).

Ага.
А пример на JS, AJAX можно? Пример открытия/закрытия.

А без Ajax ну никак не запомнить состояние объекта на странице? И что за крайности такие....

....>Или можно сохранить через cookie состояние (открыто/закрыто).
Смотря какая задача, я в разных ситуациях по разному делал!

Пример открытия/закрытия:

<A HREF='javascript:void(0);' onclick='document.getElementById("pole1").style.display=(document.getElementById("pole1").style.display=="none") ? "" : "none";'> pole 1 </A> <div style='padding-left:20px;' id='pole1'>     text 1 <BR>     text 2 <BR>     text 3 <BR> </div>

Особенно <A HREF='javascript:void(0);' клево, словно кроме как по тегу А и щелкнуть больше не почему.

А как сделать "запоминание"? Я понял, что есть 2 способа. А как их реализовать?

смотрю sim5 может только критиковать!!! Наверное огромный специалист!

Да причем тут критика? Что блин за мода использовать тег А ради того чтобы сделать щелчок, что на более фонтазии не хватает, или это панацея?

Вот вы писали

<A HREF='javascript:void(0);' onclick='document.getElementById("pole1").style.display=(document.getElementById("pole1").style.display=="none") ? "" : "none";'> pole 1 </A> <div style='padding-left:20px;' id='pole1'>      text 1 <BR>      text 2 <BR>      text 3 <BR>  </div>

А как сделать, что бы когда блок открыт, текст был "- pole 1", а когда блок закрыт - "+ pole 2".

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

<A HREF='javascript:void(0);' id='a_pole1' onclick='click_pole(this,"pole1","pole 1");'>+ pole 1 </A> <div style='padding-left:20px;display:none;' id='pole1'>     text 1 <BR>     text 2 <BR>     text 3 <BR> </div> <BR> <A HREF='javascript:void(0);' id='a_pole2' onclick='click_pole(this,"pole2","pole 2");'>+ pole 2 </A> <div style='padding-left:20px;display:none;' id="pole2">     text 1 <BR>     text 2 <BR>     text 3 <BR> </div> <Script language='javascript'> function click_pole(src,pole,text) {     if (document.getElementById(pole).style.display=="none")     {         document.getElementById(pole).style.display="";         src.innerHTML="- "+text;         setCookie(pole,"1");              }     else     {         document.getElementById(pole).style.display="none";         src.innerHTML="+ "+text;         setCookie(pole,"0");             } } if (getCookie("pole1")=="1") click_pole(document.getElementById("a_pole1"),"pole1","pole 1"); if (getCookie("pole2")=="1") click_pole(document.getElementById("a_pole2"),"pole2","pole 2"); // Установить куки  function setCookie(name, value) {        var valueEscaped = escape(value);        var expiresDate = new Date();        expiresDate.setTime(expiresDate.getTime() + 365 * 24 * 60 * 60 * 1000); // срок - 1 год, но его можно изменить        var expires = expiresDate.toGMTString();        var newCookie = name + "=" + valueEscaped + "; path=/; expires=" + expires;        if (valueEscaped.length <= 4000) document.cookie = newCookie + ";";  }  // Получить куки  function getCookie(name) {        var prefix = name + "=";        var cookieStartIndex = document.cookie.indexOf(prefix);        if (cookieStartIndex == -1) return null;        var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);        if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;        return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));  } </Script>

Спасибо большое.
Еще такой момент. Плавность открывания/закрывания можно впихнуть в этот скрипт?

Можно впихнуть !
Лучше думаю всё сделать через отдельный класс который будет отвечать за открытие и закрытие списка . Плавность можно создать через таймеры !
Вот , примерно так : (таймер настроен под IE, на других может быстрее работать)

<html> <body> </body> </html>      <Script language='javascript'> new add_list("idpole1","pole1","text 1<BR>text 2<BR>text 3<BR><BR>"); new add_list("idpole2","pole2","text 1<BR>text 2<BR>text 3<BR><BR>"); function add_list(name,title,text) {     var status=true;     var m_name=name;     var m_title=title;     var m_height=0;     var save_height;     var timershow,timerhide;          var div = document.createElement("div");         div.innerHTML="- "+title;     div.style.cursor="pointer";     document.body.appendChild(div);              var divt = document.createElement("div");     divt.style.display="";     divt.innerHTML=text;     divt.style.overflow="hidden";     divt.style.paddingLeft="20px";     document.body.appendChild(divt);     if (getCookie(name)!="1") {divt.style.display="none";div.innerHTML="+ "+title;status=false;}     else {save_height=divt.offsetHeight;m_height=save_height;}     var show=function(){         m_height+=5;         if (m_height>save_height)  clearTimeout(timershow);         else {             divt.style.height=m_height+"px";             timershow=setTimeout(function(){clearTimeout();show()}, 1);         }     }         var hide=function(){         m_height-=5;         if (m_height<=0)  {divt.style.display='none';clearTimeout(timerhide);}         else {             divt.style.height=m_height+"px";             timerhide=setTimeout(function(){clearTimeout();hide()}, 10);         }     }         div.onclick=function() {         status=!status;         if (status) {             divt.style.height='';             divt.style.display="";             save_height=divt.offsetHeight;             divt.style.height="1px";             div.innerHTML="- "+m_title;                         m_height=1;             setCookie(m_name,"1");             show();                     } else {             div.innerHTML="+ "+m_title;             setCookie(m_name,"0");             hide();                      }     } } // Установить куки  function setCookie(name, value) {        var valueEscaped = escape(value);        var expiresDate = new Date();        expiresDate.setTime(expiresDate.getTime() + 365 * 24 * 60 * 60 * 1000); // срок - 1 год, но его можно изменить        var expires = expiresDate.toGMTString();        var newCookie = name + "=" + valueEscaped + "; path=/; expires=" + expires;        if (valueEscaped.length <= 4000) document.cookie = newCookie + ";";  }  // Получить куки  function getCookie(name) {        var prefix = name + "=";        var cookieStartIndex = document.cookie.indexOf(prefix);        if (cookieStartIndex == -1) return null;        var cookieEndIndex = document.cookie.indexOf(";", cookieStartIndex + prefix.length);        if (cookieEndIndex == -1) cookieEndIndex = document.cookie.length;        return unescape(document.cookie.substring(cookieStartIndex + prefix.length, cookieEndIndex));  }   </Script>

И еще одно. Как изменить цвет? Когда поле со знаком "-", то цвет один, а когда в состоянии "+" - другой.
Сам пытался-пытался - так ничего и не вышло... скажите, где копать?

http://www.htmlbook.ru/css/color.html
http://www.htmlbook.ru/css/background-color.html

div.onclick=function() {        ...         if (status) {        ...           div.style.backgroundColor="red";//цвет фона           div.style.color="blue";//цвет текста         } else {       ...           div.style.backgroundColor="blue";//цвет фона           div.style.color="red";//цвет текста         }      }

Спасибо

Я все же не врубаюсь, как вставить изменение цвета в зависимости от состояния. Вот сюда:

function click_pole(src,pole,text)  {      if (document.getElementById(pole).style.display=="none")      {          document.getElementById(pole).style.display="";         src.innerHTML="- "+text;          setCookie(pole,"1");      }      else      {          document.getElementById(pole).style.display="none";         src.innerHTML="+ "+text;          setCookie(pole,"0");              }  } <span class="dishes">  <A style="" HREF='javascript:void(0);' id='a_pole1' onclick='click_pole(this,"pole1","Закуски");'>+ Закуски</A> </span> <div style='display:none;' id='pole1'>  <p><a href="http://offcook.com/cook.php?cat=1">Салаты</a></p> <p><a href="http://offcook.com/cook.php?cat=2">Бутерброды</a></p> </div>

function click_pole(src,pole,text)   {       if (document.getElementById(pole).style.display=="none")       {           document.getElementById(pole).style.display="";          src.innerHTML="- "+text;           src.style.color="blue";          setCookie(pole,"1");       }       else       {           document.getElementById(pole).style.display="none";          src.innerHTML="+ "+text;           src.style.color="green";          setCookie(pole,"0");               }   }

Чертовщина какая-то! Теперь цвета Куки не запоминает :(.