Shawson's Code Blog

I recently swapped the .net Accordion control on my main home page from the Ajax Control toolkit for the jQuery Accordion control from jquery.com- this was mainly because i have a big moving flash background of the sky wooshing past, and found the MS accordion control a bit too heavy to expand out smoothly on slower machine, so thought i would try the jQuery version and was pleased to find it was a lot smoother.

However, to my horror, all my links stopped working!

$(function() {
            $("#menu").accordion({
                active: false,
                alwaysOpen: false,
                animated: "easeslide"
            });
        });

<ul id="menu" style="width: 250px;">
  <li>
    <a href="#">Welcome</a>
    <div>This is the home page to what will eventually be a whole bunch of different web projects that i have online to fiddle about with.</div>
  </li>
  <li>
    <a href="#">Work</a>
    <div>
      <ul>
        <li>
          <a title="My Web Development Blog" href="http://www.shawson.co.uk/codeblog/">My Code Blog</a>
        </li>
      </ul>
    </div>
  </li>
  <li>...</li>
</ul>

This is because the jQuery accordion, using the default settings as i was, treats links as buttons for expanding the sections of the accodion, so voids their default action.  I resolved this by updating the jQuery settings to only treat links with a specific class as the accordion headings, and leave other links alone- i created a new class called accordion-label to use for the accordion buttons and updated the jquery as follows;

$(function() {
            $("#menu").accordion({
                active: false,
                alwaysOpen: false,
                animated: "easeslide",
                navigation: true,
                header: "a.accordion-label"
            });
        });

I then added the accordion-label class to my “Welcome” link, “Work” link etc, and left the rest as-is.

Bookmark