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

Question

Мне нужно реализовать раскрывающийся/сворачивающийся блок в пользовательском интерфейсе 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), но мне трудно понять, как заставить только стрелку реагировать на события щелчка.

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

Answer 1

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

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

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

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

Answer 2

Я сделал это так:

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