Аккордеонный одноэлементный расширяющийся компонент в пользовательском интерфейсе jQuery

Мне нужно реализовать раскрывающееся / сворачивающееся окно в пользовательском интерфейсе jQuery. В свернутом виде будет отображаться только заголовок окна. При раскрытии будет отображаться заголовок + содержимое.

То, что мне нужно сделать, очень близко к одноэлементному аккордеону jQuery UI с alwaysOpen = false (в документе это же свойство называется «сворачиваемым», но на практике с jQuery 1.3.2 и jQuery UI 1.6rc6 оно кажется всегда открытым) :

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
});

Есть одна проблема: мне нужно, чтобы разворачивание / сворачивание происходило только при нажатии на треугольник слева, а не при щелчке всего заголовка.

Дополнительным требованием является то, что я хотел бы использовать стили пользовательского интерфейса по умолчанию jQuery UI и не реализовывать свою собственную таблицу стилей, чтобы при необходимости я мог создавать новые стили с помощью themeRoller. Стили аккордеона в пользовательском интерфейсе jQuery (включая стрелки в заголовке) очень хорошо подходят для этой цели.

Теперь у меня есть два варианта:

1) настройте виджет «Аккордеон» так, чтобы только треугольник реагировал на события развертывания / свертывания. Мне нужно, чтобы щелчки по остальной части заголовка в основном игнорировались.

2) реализовать собственный виджет, взяв за основу стили аккордеона.

Я бы предпочел 1), но мне трудно понять, как заставить только стрелку реагировать на события щелчка.

Итак, что касается самого вопроса, как бы вы это сделали?

Ответов (2)

Решение

Хорошо, оказывается, это легко сделать с помощью самого виджета «аккордеон». Просто установите аккордеон так:

$('.myAccordion').accordion({
    header: 'h3'
    , alwaysOpen: false
    , event: 'click'
});

$('.myAccordion h3 a').click(function() {
    return false;
})

Хотя это плохая практика использования, так как целевая область клика настолько мала, но что ж, это отвечает на вопрос, который я опубликовал.

У меня так получилось:

$('.accordion').accordion({
  header: '.accordion-header',
  collapsible: true
});