HTML+CSS+JavaScript

Вот этот участок:

//По клику на ссылке "Отобразить все" разворачиваем все блоки $("A.showAll").click(function() {   $("div.box").fadeIn(); });//end of click()

Замените на это:

//По клику на ссылке отображаем либо скрываем блоки $("A.showAll").toggle(function() {   $("div.box").fadeIn();   $(this).html("Скрыть все"); }, function() {   $("div.box").fadeOut();   $(this).html("Отобразить все"); });//end of toggle()

Спасибо, все заработало....еще один вопрос, как изменить текст на СКРЫТЬ все после того как нажали ОТКРЫТЬ ВСЕ? чтоб повторно по клику уже блоки все сворачивались?!

интересный пример. но что если не известно значение ширины?

Проблема в том, что у вас в HTML-коде блоки, которые необходимо скрыть/отобразить имеют идентификаторы box:

<div id='box'></div>

А JS код пытается работать с классами box:

//По клику на ссылке "Отобразить все" разворачиваем все блоки $("A.showAll").click(function() {   $("div.box").fadeIn(); });//end of click()

Вот этот фрагмент $("div.box") извлекает все блоки DIV с классом box. Но поскольку таких на вашей странице нет, то ничего и не работает.

Измените все id='box' на class='box' и JS код заработает.
Также следует учитывать, что идентификаторы должны быть уникальными на странице, т.е. на странице не должно быть 2-х и более тегов с одним и тем же идентификатором.

Если у вас часто возникают такие задачи как выбор элементов на странице, изменение свойств элементов, скрытие/отображение/перемещение элементов, то я вам горячо рекомендую освоить jQuery. С помощью неё эти задачи решаются на раз-два.

Приведу код:

<a href="#" id="open_all" class="showAll">Открыть все</a> <script type="text/javascript">     $(document).ready(function() {       //После загрузки страницы прячем все блоки       $("div.box").hide();       $("A.mn").click(function() {         //Если блок скрыт - отобразим его         if($(this).next().css("display") == "none") {           $(this).next().fadeIn();         }         //Если блок отображен - скроем его         else {           $(this).next().fadeOut();         }       });//end of click()       //По клику на ссылке "Отобразить все" разворачиваем все блоки       $("A.showAll").click(function() {         $("div.box").fadeIn();       });//end of click()     });//end of ready()   </script>

И вот таких блоков куча:

<div id="box" style="display: none;">      <form action="#" method="post" enctype="multipart/form-data">      <div><label>Форма собственности</label><select>      <option value="1">ООО</option>           <option value="14">Добавить</option>                  </select>     </div>             <div><label>Название фирмы</label><input type="name_f" id="name_f_a" /></div>       <div><label>Логотип фирмы</label><input type="file" value="Загрузить" /><br /><span>Дождитесь появления фото на странице, иначе не загрузится!</span></div>       <div><label>О предприятии</label><textarea name="about_f"></textarea><br /><span>Информация о Вашем предприятии: Дата создания, периоды развития, коллектив, партеры, клиенты, лицензии, дипломы и награды… (Контактную информацию не указывайте – заполняется ниже) </span></div> <p><b style="color:#FF0000; font-weight:bold">*</b> В случаи не заполнение данного раздела сейчас – это можно будет сделать позже воспользовавшись вызовом нашего представителя Редактировать </p>      </form>            </div>

Вроде везде все совпадает по именам классов...не знаю в чем проблема...

Внимательно проверьте имена всех классов в HTML и JavaScript коде

Странно вроде все тоже самое:

Вот полностью работающий пример:
http://irbis09.jino.ru/test/
Посмотрите его исходный код, сравните со своим.

Еще вопрос к спецам как по клику на отображение блока - перевести пользователя на него типа якоря

ооо супер..Благодарчик...Правда кнопка Отобразить все не срабатывает