jQuery Accordion: links don't work

Question

I\'m working on a page using jQuery\'s accordion UI element. I modeled my HTML on that example, except that inside the

elements, I have some unordere

Answer 1

I had this exact same problem and could not find an answer anywhere. In fact, a couple sources said it just couldn't be done.

Upon further playing, I did find a working solution. May not be great, but it works like a charm.

First, just make sure the links you want to be clickable, and immune to the accordion controls, is easily identifiable. I had a class on mine.

 $('.stats a').click(function(){
expander.accordion('disable');
window.open($(this).attr('href'));

setTimeout ( function() {
  expander.accordion('enable');
}, 250 );

});

Essentially, this listens for when a link inside the accordion header is clicked. When it is, the accordion is temporarily disabled, keeping it from firing as normal. The link is then opened, in this case, in a new window but you could use document.location as well

If we re-enabled the accordion immediately, it will still fire and toggle the accordion. I found that a super-short timeout provides enough delay.

Hope this helps someone!