Accordéon d'un élément composant de gonflement dans l'interface utilisateur jQuery

Question

Je dois mettre en œuvre une boîte en expansion / effondrement jQuery UI. Lorsqu'il est replié, seule la tête de la boîte montrerait. Lorsque élargi, l'en-tête + contenu montreraient.

Ce que je dois faire est très proche de jQuery UI accordéon un élément avec AlwaysOpen = false (la même propriété est appelée « pliable » dans le document, mais en pratique avec jQuery 1.3.2 et jQuery UI 1.6rc6 il semble être AlwaysOpen):

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

Il y a un problème: J'ai besoin l'expansion / effondrement pour se produire que lorsque vous cliquez sur le triangle à gauche, et non pas en cliquant sur l'en-tête ensemble

.

Une exigence supplémentaire est que je voudrais utiliser les styles de l'interface utilisateur par défaut de l'interface utilisateur jQuery et non mettre en œuvre ma propre feuille de style, pour que je puisse rouler de nouveaux styles avec ThemeRoller si besoin est. Les styles d'accordéon dans l'interface utilisateur jQuery (y compris les flèches dans l'en-tête) sont très bien adaptés à cet effet.

Maintenant, j'ai deux options:

1) configurer le widget accordéon de sorte que seul le triangle répond à développer / événements d'effondrement. J'ai besoin des clics sur le reste de l'en-tête pour être fondamentalement ignorés.

2) mettre en œuvre votre widget, en utilisant des styles d'accordéon comme base.

Je préférerais faire 1), mais je vais avoir du mal à comprendre comment faire que la flèche de répondre à cliquer sur les événements.

Alors, comme pour la question réelle, comment voulez-vous faire?

Answer 1

OK, se révèle, il est facile d'y arriver avec le widget accordéon lui-même. Il suffit de régler l'accordéon de cette façon:

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

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

Bien qu'il soit une mauvaise pratique de la facilité d'utilisation depuis la zone cible de clic est si petit, mais bien, il répond à la question que j'ai posté.

Answer 2

Je l'ai fait comme ça:

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