jQuery ui accordion losing links in IE6

I’ve just set up an accordion using the simple version that comes with JQuery UI.

It uses links inside h3s as the headers, and I noticed that links within the content divs had disappeared. The documentation at http://docs.jquery.com/UI/Accordion says -

If you have links inside the accordion content and use a-elements as headers, add a class to them and use that as the header, eg. header: ‘a.header’.


I’m just struggling with the right way to do that. I’ve tried giving each ‘a’ a class of ‘faq’ and using :

$(document).ready(function() {
    $("#faq_accordion").accordion( { header: 'a.faq' },{ autoHeight: false } );
  });

… but this makes the accordion fail to initialise.

If I set the header simply to the h3

  $(document).ready(function() {
    $("#faq_accordion").accordion( { header: 'h3' }{ autoHeight: false } );
  });

… it works nicely in FF and IE8 but in IE6 the links within the content are still gone. Not just hidden or a different colour but they seem just not to be there. My target audience unfortunately is IE6.

Are there errors in the way I’ve coded it, or is it just not possible using this accordion?

Sure - here are a few Q&As:

<h3><a class="faq"   href="#">My Business Unit normally go through Learning Managed Services
          to arrange external training, should this route continue?</a></h3>
<div>
      <p>Yes, you should continue to follow any local processes within in your
        business unit in addition to completing the Professional Qualifications
        Application form. </p>
      </div>
<h3><a class="faq"  href="#">How does this process differ from the service offered by Learning
          Managed Services?</a></h3>
<div>
      <p>This process enables you to gain authorisation for the Group to support
          your study towards a professional qualification, the Learning Managed
          Service provides access to external training courses provided by commercial
          training providers, which may or may not lead to a professional qualification.</p> 

      </div>
<h3><a class="faq"  href="#">I am completing a Professional Qualification application form          and it is asking me for the full costing of my qualifications, what          should I put?</a></h3>
<div>
      <p>Depending upon the route you are planning to take for your course of
        study you will need to contact the qualification provider directly or
        the Learning Managed Service, who will be able to advise you of the current
        fees. See <a href="contacts.asp">Useful Contacts</a>. </p>
      </div>

You need to show us your html code too, as you need to add those new classes in there as well.

Hmm, unfortunately I don’t know jQuery well enough to advise here. This might be a simpler option:

OK - thanks.

I just wanted to see if my existing one was fixable before throwing it out, but this is another option for me, and looks like it might work.