link within jquery-ui accordion

Question

I have a link within the content of a jquery-ui accordion div. It works, but is not formatted like the rest of my links. I found this on the jquery-ui accordion page:

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'.

However, I'm not really sure how to do this. I assume I need to change the .css for the accordion to use this new a.header class for the headers and then my regular a elements will use the css that the rest of the a elements on my site use?

Here's the .css for the accordion:

    /* Accordion
----------------------------------*/
.ui-accordion .ui-accordion-header { cursor: pointer; position: relative; margin-top: 1px; zoom: 1; }
.ui-accordion .ui-accordion-li-fix { display: inline; }
.ui-accordion .ui-accordion-header-active { border-bottom: 0 !important; }
.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }
.ui-accordion .ui-accordion-header .ui-icon { position: absolute; left: .5em; top: 50%; margin-top: -8px; }
.ui-accordion .ui-accordion-content { padding: 1em 2.2em; border-top: 0; margin-top: -2px; position: relative; top: 1px; margin-bottom: 2px; overflow: auto; display: none; zoom: 1; }
.ui-accordion .ui-accordion-content-active { display: block; }

Answer 1

I recommend using something like firebug to inspect your element. From there you can figure out exactly what part of that CSS is affecting your link so you can style it that way. That or give the link its own class name to style it the way you want. If you want to go directly to the jquery UI CSS, perhaps look into styling the tags with 'a' in them and see if that gets you anywhere.

ie:

.ui-accordion .ui-accordion-header a { display: block; font-size: 1em; padding: .5em .5em .5em .7em; }
/* IE7-/Win - Fix extra vertical space in lists */
.ui-accordion a { zoom: 1; }
.ui-accordion-icons .ui-accordion-header a { padding-left: 2.2em; }

those ones

Answer 2

You can change your headers to use something other than an tag and then set the property when you're creating the accordion:

<div id="accordion">
  <h3>My Header</h3>
     <div>My content with a <a href="#">link</a></div>
  <h3>Header Two</h3>
     <div>Some more stuff...</div>
</div>


$("#accordion").accordion({ header: 'h3' });

Answer 3

I have a website where I need to do this and I use the code below to accomplish differentiating between links and headers in the accordion:

Markup:

<div id="accordion">
  <h3>
    <a href="MyNewPage.aspx" rel="newpage">Link To a New Page</a>
  </h3>
  <h3>
    <span class="name">Dental Providers</span>
  </h3>
    <div>
        Some Content with a <a href="#">Link to more stuff</a></div>
    </div>
</div>

JQuery:

     //redirect headers that link to new pages
     $('A[rel="newpage"]').click(function () {
         window.location=$(this).attr('href');
         return false;
     });
     //set up the accordion to use the h3 header
      $("#accordion").accordion({
         header: 'h3', 
         autoHeight: false,
         collapsible: true,
         fillSpace: false,
         icons: { 'header': 'ui-icon-triangle-1-e', 'headerSelected': 'ui-icon-triangle-1-s' }
     });