Сразу приведу пример и выложу архив демо, а то меня, не без оснований конечно, обвиняли в отсутствии демо в статьях про jQuery UI. Поскольку ничего особенно сложного в этом решении нет, то я буду краток – только код, пример и минимум необходимых пояснений.

Итак, сначала мы делаем все в точности так же, как написано в статье jQuery UI – виджет Accordion. Т.е. подключаем необходимые файлы к HTML-странице. Здесь же внесем первое дополнение. Для того, чтобы иметь возможность запоминать состояние секций аккордеона, нам потребуется подключить еще один небольшой, но весьма полезный плагин – jQuery Cookie.

<script src="js/jquery.cookie.js" type="text/javascript"></script>

Поиметь свежую версию этого плагина можно на http://plugins.jquery.com/project/Cookie.

Теперь приведу пример HTML-разметки меню-аккордеона.

<div id="accordion">
  <h3><a href="#">Секция 1</a></h3>
  <ul>
    <li><a href="?1-1">Пункт меню 1-1</a></li>
    <li><a href="?1-2">Пункт меню 1-2</a></li>
    <li><a href="?1-3">Пункт меню 1-3</a></li>
  </ul>
  <h3><a href="#">Секция 2</a></h3>
  <ul>
    <li><a href="?2-1">Пункт меню 2-1</a></li>
    <li><a href="?2-2">Пункт меню 2-2</a></li>
    <li><a href="?2-3">Пункт меню 2-3</a></li>
  </ul>
  <h3><a href="#">Секция 3</a></h3>
  <ul>
    <li><a href="?3-1">Пункт меню 3-1</a></li>
    <li><a href="?3-2">Пункт меню 3-2</a></li>
    <li><a href="?3-3">Пункт меню 3-3</a></li>
  </ul>
  <h3><a href="#">Секция 4</a></h3>
  <ul>
    <li><a href="?4-1">Пункт меню 4-1</a></li>
    <li><a href="?4-2">Пункт меню 4-2</a></li>
    <li><a href="?4-3">Пункт меню 4-3</a></li>
  </ul>
</div>

Ничего загадочного тут и вовсе нет. Что еще? Добавим немного стилей, чтобы выделять активный пункт меню. Например так:

a.open { color: #f00;}

т.е. в примере просто выделяем текст ссылки в меню красным цветом.

А теперь самое интересное – javascript-код:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    navigation: true
  });
  $("#accordion li a").click(function(){
    $.cookie("openItem", $(this).attr("href"));
  });
  $("#accordion li a[href$=`" + $.cookie("openItem") +
  "`]").addClass("open");
});
</script>

И здесь ничего сложного! Отыскали нужный элемент по идентификатору #accordion, применили к нему возможности плагина. Из опций передали только одну, но в нашем случае необходимую опцию navigation, которой присвоили значение true. Это обеспечит нам открытие нужной секции аккордеона при переходе по ссылке.

На следующем шаге необходимо обрабатывать щелчок мышкой по пункту меню, чтобы поставить соответствующую куку. Что мы и делаем – находим все элементы a внутри li, внутри нашего аккордеона, связываем с ними событие click, по которому будет вызвана функция-обработчик.

Тут нам пригодятся возможности плагина jQuery Cookie. Мы устанавливаем куку с именем openItem, и значением, которое получаем из атрибута href той ссылки, по которой был совершен клик.

И последний шаг – при загрузке страницы мы должны прочитать куку (если она конечно есть) и в соответствии с ее значением «подсветить» нужный пункт меню. Делаем это – ищем нужный пункт меню выбирая элемент a внутри li аккордеона. Но не просто, а значение атрибута href которого соответствует значению, сохраненному в куке.

Знак $ используем потому, что некоторые браузеры возвращают значения атрибута href по разному. Некоторые отдают абсолютный путь, некоторые – относительный. Чтобы исключить эту неоднозначность мы ищем такое значение атрибута href, которое заканчивается одинаково со значением, сохраненным в куке.

Если такая ссылка будет найдена, то с помощью метода addClass мы добавим ей класс open, что заставит ее «покраснеть».

Собственно это все, больше тут рассказывать не о чем…

<link type="text/css" href="css/smoothness/jquery-ui-1.7.1.custom.css" rel="stylesheet" />
<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.7.1.custom.min.js" type="text/javascript"></script>

Мы подключили файл стилевого оформления виджета, файл библиотеки jQuery. В третьем файле объединена функциональность ядра UI и виджета Accordion.
Двигаемся дальше и замечаем, что Accordion предъявляет некоторые требования к HTML-разметке.

<div id="accordion">
  <h3><a href="#">Section 1</a></h3>
  <div>Section 1 content</div>
  <h3><a href="#">Section 2</a></h3>
  <div>Section 2 content</div>
  <h3><a href="#">Section 3</a></h3>
  <div>Section 3 content</div>
</div>

Обратите внимание, что по умолчанию виджет считает заголовками секций элементы a (в нашем примере они заключены в тэг h3), а содержимое секций должно быть заключено в следующий непосредственно за ним элемент div. Внутри элемента div содержимое может быть практически любым.
Осталось привязать функциональность виджета к HTML-разметке. Это просто:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion();
});
</script>

Все! Accordion уже работает! Правда использует он пока все настройки по умолчанию, а мы хотим настроить его под себя. Это тоже несложно. Передадим виджету пару настроек.

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
  	autoHeight: false,
  	active: 2
  });
});
</script>

По умолчанию у аккордеона открывалась первая секция, высота всех секций была одинаковая и равна высоте секции с максимальным количеством содержимого. Передав пару настроек мы добились того, что по умолчанию открывается третья секция и каждая секция имеет высоту, соответствующую ее содержимому.
Мы использовали только две настройки, но их значительно больше и с их помощью можно очень гибко настраивать виджет. Ниже приведен список возможных опций с описаниями.

active – Выбирает секцию, открытую при инициализации. По умолчанию имеет значение first child, т.е. открывается первая секция. Установка значения в false не приведет к тому, что все секции будут закрыты. Для того чтобы иметь возможность закрывать все секции используется collapsible: true.

animated – Включает или отключает анимацию. Установка опции в false отключит анимацию, применяемую по умолчанию (эффект скольжения). Дополнительно поддерживаются эффекты ‘bounceslide’ and ‘easeslide’, но оба эффекта требуют подключения дополнительного плагина jQuery Easing.

autoHeight – Автоматическая установка высота секции. По умолчанию используется значение true и высота всех секций определяется секцией с максимальной высотой. При установке значения false все секции будут иметь высоту, определяемую внутренним содержимым секции.

clearStyle – По умолчанию используется значение false. Если установить значение true, то после окончания анимации будут очищены css-свойства height и overflow. Эта опция позволяет работать с динамически изменяемым содержимым секций. Не используется вместе с опцией autoHeight.

collapsible – По умолчанию используется значение false. Если при инициализации установить значение true, можно будет закрывать открытую секцию щелчком по заголовку, таким образом, чтобы все секции были закрыты.
event Определяет событие, по которому происходит переключение секций. По умолчанию установлено значение ‘click’. Можно использовать значение ‘mouseover’.

fillSpace – По умолчанию опция имеет значение false. При установке значения true открытая секция будет занимать всю возможную высоту, определяемую родительским элементом. Переопределяет опцию autoHeight.

header – По умолчанию заголовком секции считается элемент a. Но заголовок можно определить явно, например header: ‘h3′.

icons – Значки для использования в заголовках. Это объект, состоящий из двух пар ключ/значение. Может быть определен как ‘header’: ‘ui-icon-plus’ и ‘headerSelected’: ‘ui-icon-minus’. Значения являются именами классов css, с помощью которых выбирается соответствующая картинка. Рекомендуется использовать значки, предоставляемые jQuery UI ThemeRoller вместе с многочисленными вариантами стилевого оформления.

navigation – По умолчанию используется значение false. Если установить true, разыскивает и активирует ссылку. Используется, как правило, для построения меню на основе виджета, поскольку при перезагрузке страницы позволяет сохранить состояние. Обычно применяют HTML-разметку на основе списков.

navigationFilter – В этой опции можно определить функцию, которая будет каким-либо образом обрабатывать ссылку, по которой осуществляется переход. Используется совместно с опцией navigation.

Однако это еще не все. Кроме возможности довольно гибко настроить виджет, можно заставить его реагировать на события. Очень простой пример

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    autoHeight: false,
    active: 2,
    change: function(event, ui) {
      alert("Произошло событие " + event.type);
    }
  });
});
</script>

Обратите внимание на опцию change, значением которой является callback-функция, вызываемая при смене секции. Эта callback-функция может принимать два аргумента. Первый – это обычный объект event, второй аргумент – объект ui, в свойствах которого содержится следующая информация:
ui.newHeader – объект jQuery с информацией об активируемом заголовке;
ui.oldHeader – объект jQuery с информацией о предыдущем заголовке;
ui.newContent – объект jQuery с информацией об активируемом содержимом;
ui.oldContent – объект jQuery с информацией о предыдущем содержимом;

И пример того, как можно обратиться к свойствам этих объектов:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    autoHeight: false,
    active: 2,
    change: function(event, ui) {
      alert("Старый заголовок: " +
               ui.oldHeader.find("a").text() +
  	       "\nНовый контент: " +
               ui.newContent.text());
    }
  });
});
</script>

Опций, связанных с событиями всего две:
Опция changestart – Событие accordionchangestart наступает каждый раз при начале смены секций.
Опция change – Событие accordionchange наступает каждый раз после того, как изменилась активная секция. Если используется анимация, то событие наступает по ее завершении, если нет – то событие наступает немедленно.

Нам осталось познакомиться с методами виджета Accordion. В следующем примере продемонстрировано как с помощью метода option можно получить и установить значения опций уже после инициализации виджета. Для этого придется в HTML-код с которым мы эксперементируем, добавить пару кнопок:

<button id="getter">Get Option</button>
<button id="setter">Set Option</button>

и пример javascript-кода:

<script type="text/javascript">
$(function(){
  $("#accordion").accordion({
    autoHeight: false,
    active: 2,
    animated: false
  });
  $("#getter").click(function(){
   alert("animated: " +
   $("#accordion").accordion("option","animated"));
  });
  $("#setter").click(function(){
   $("#accordion").accordion("option","animated","slide");
   alert("animated: " +
   $("#accordion").accordion("option","animated"));
  });
});
</script>

При инициализации виджета, мы использовали опцию animated: false, отключив, таким образом, применяемую по умолчанию анимацию. Попробуйте переключать секции и убедитесь в том, что никаких эффектов при переключении действительно нет. Если щелкнуть по кнопке Get Option, мы увидим окно предупреждения, в котором будет выведено текущее значение опции animated. Изменим значение этой опции на slide, щелкнув по кнопке Set Option. Получили окно предупреждения с сообщением: animated: slide. Проверим это, переключая секции. Действительно, теперь при переключении секций используется анимация.

Ну, а ниже описаны все возможные методы виджета Accordion:

destroy – .accordion(«destroy») полностью удаляет всю функциональность виджета Accordion. Возвращает элементы в состояние, предшествующее инициализации.
disable – .accordion(«disable») временно запрещает использование всей функциональности виджета. Вновь разрешить ее использование можно с помощью метода enable.
enable – .accordion(«enable») разрешает использование всей функциональности виджета, если ранее она была запрещена с использованием метода disable.
option – .accordion(«option», optionName, [value]) с помощью этого метода можно получить или установить значение любой опции виджета после инициализации.
activate – .accordion(«activate» , index) с помощью этого метода можно программно активировать необходимые секции. Аргумент index может быть номером секции (отсчет ведется от 0) или селектором jQuery, который выберет необходимый элемент. Передавая значение -1 можно закрыть все секции (только в случае использования опции collapsible:true).

На этом пока закончим, хотя и остались неосвещенными вопросы построения на базе виджета Accordion навигационного меню и мы почти не рассматривали стилевое оформление виджета. Но статья и так получилась довольно громоздкой, а к упомянутым темам, надеюсь, еще удастся вернуться позже.

Посмотрите эти два примера. Пример слева срабатывает по щелчку мышью на панельке-заголовке и имеет довольно интересный эффект «прыгающего мячика», когда панелька падает вниз. Пример справа срабатывает при наведении указателя мыши на панель-заголовок. Тут применен эффект по умолчанию – простое скольжение.

Жалко только, что как всегда в браузере названИЕкоторого Вы знаете без меня, все это выглядит не так прилично как в остальных. Ну, если немного помучаться с CSS, наверняка можно привести все к единообразию).

Вы можете сохранить исходный код примера и при наличии у Вас библиотеки jQuery, воспроизвести его на своем сайте.

Как всегда, нам потребуется подключить саму библиотеку и еще пару-тройку небольших файлов в раздел HEAD.

<script src="js/jquery-1.2.1.js" type="text/javascript"></script>
<script src="js/jquery.dimensions.js" type="text/javascript"></script>
<script src="js/ui.accordion.js" type="text/javascript"></script>
<script src="js/jquery.easing.js" type="text/javascript"></script>

Сначала подключаем саму библиотеку, затем файл jquery.dimensions.js (он нам уже знаком – отвечает за работу с размерами элементов). Интересный нам файл ui.accordion.js – именно он обеспечивает работу аккордеона. Файл jquery.easing.js понадобится только в том случае, если Вы решите использовать анимацию, отличную от той, что установлена по умолчанию.

HTML и CSS-код приводить не имеет смысла, поскольку он настолько прост, что пояснений не требует. Посмотреть его Вы всегда сможете в исходном коде примера. Не забывайте только, что тот маленький скрипт, код которого я приведу ниже, обращается к элементам по их идентификаторам.

Итак код:

<script type="text/javascript">
$(document).ready(function(){
  $("#example").accordion({
     animated: "bounceslide"
  });
  $("#example2").accordion({
    event: "mouseover"
  });
});
</script>

И это все! Мы написали оба аккордеона!
Как всегда весь код обернут в $(document).ready(function(){ … }); Для первого аккордеона выбран элемент с id #example, для второго соответственно #example2. В опции animated первого аккордеона мы (пользуясь тем, что подключили файл jquery.easing.js) задали интересный эффект, а в опции event второго аккордеона указали на то, что срабатывать он должен по событию mouseover.

Собственно мы могли поступить еще проще и написать вот так:

$("#example").accordion();

и такой код прекрасно работал бы, потому, что в файле ui.accordion.js задаются опции по умолчанию.
По умолчанию там заданы опции animated: slide и event: click, а также очень интересная опция autoheight: true. В примере, появляющиеся окошки для отображения контента всегда одинаковы и высота определяется по блоку с максимальным содержимым. Если же опцию autoheight установить в false, высота будет разная.

Полный список опций можно отыскать на сайте разработчика. Удачи и юзайте jQuery!