Question

I’m working on a page using jQuery’s accordion UI element. I modeled my HTML on that example, except that inside the <li> elements, I have some unordered lists of links. Like this:

  $(document).ready(function() {      $(".ui-accordion-container").accordion(         {active: "a.default", alwaysOpen: true, autoHeight: false}      );   });    <ul class="ui-accordion-container">   <li> <!-- Start accordion section -->    <a href='#' class="accordion-label">A Group of Links</a>    <ul class="linklist">       <li><a href="http://example.com">Example Link</a></li>       <li><a href="http://example.com">Example Link</a></li>    </ul>     <!--and of course there's another group --> 

Problem: Links don’t work

In all browsers I’ve tested, the links in those accordion menus cause the accordion section to collapse instead of taking you to the linked page. (I can still right-click and go to the linked site.)

Could this be some kind of click binding issue?

Answer 1

By default, the accordian widget sets all the links to headers. To change it, you need to specify a selector with the headers option. So, your code would look like this:

$('.ui-accordion-container').accordion(    { active: 'a.default', ...,  header: 'a.accordion-label' } );