jQuery UI Accordion works but prevents click-through to new page

51 views Asked by At

I have a standard accordion. It works very nicely, opening and closing, but clicking on the individual links doesn't take me to the desired page, but just opens and closes the accordion, which makes sense. So how to make the links function as well?

<ul class="trackAccordion">
  <li><a href="citiesOverviewPage">Cities</a>                           
    <ul class="trackAccordion">
      <li><a href="denver">Denver</a>                           
         <ul class="trackAccordion">
           <li><a href="denver/classes">Classes</a></li>
           <li><a href="denver/events">Events</a></li>
           <li><a href="denver/about">About</a></li>
         </ul>
      </li>
      <li><a href="newyork">New York</a>                            
        <ul class="trackAccordion">
           <li><a href="newyork/classes">Classes</a></li>
           <li><a href="newyork/events">Events</a></li>
           <li><a href="newyork/about">About</a></li>
         </ul>
      </li>
    </ul>
  </li>
  <li><a href="about">About</a></li>
</ul>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.0/jquery-ui.min.js"></script>
<script type="text/javascript">
/*<![CDATA[*/
    $( document ).ready(function() {
  $("ul.trackAccordion").accordion({
    collapsible: true,
    active: false,
    heightStyle: "content"
  });
});
/*]]>*/
</script>

EDIT: Here is a jSFiddle which is cut directly from the page. On my webpage, if I don't include the js for the accordion, the links work (though maybe a couple 404s because the website isn't finished): https://jsfiddle.net/3j4r1m4o/1/

0

There are 0 answers