jQuery accordion link issue

Question

Slight problem, I've been working with a multi-accordion for a News panel. Everything is working fine, but there is an issue that has just recently come up. Underneath the headline I have information on when said headline+article was posted and when, and also if there are any comments.

I intended to make the author and the number of comments as a link. The author link would most likely bring them to their contact page or maybe an email, the number of comments link would just expand it directly to the "View comments" which the user could also access by just expanding the article and then expanding the comments. A shortcut basically.

Now, the issue is that I'm having to put this "Posted by..." information inside the a class which allows the user to expand the headline into the article. If I do this however, it breaks the entire accordion field for that headline because there are multiple A HREF links inside the original A link. I really don't know how to get around this, if anyone has a tip or a solution I would most appreciate it, thanks.

You can view the demo here: http://www.notedls.com/demo

Answer 1

Right now you have an A-tag as your trigger

<a class="ui-accordion-link acc1">

Can you just change that to a DIV or an H1?

<div class="ui-accordion-link acc1">

Putting A-tag, and H1 inside of an A-tag is not correct anyways.

Update

Sorry, no time to write lengthy explanation, but try something like this

   $("#accordion").accordion({header:'h3'});    
   $('#accordion a').click(function(e){ e.stopPropagation(); });

This is an adaption of the example on: http://docs.jquery.com/UI/Accordion

1) Give the accordion initialization a new header (clicker) -- in your case it would be the div.ui-accordion-link

2) Then use stopPropagation to stop A-tags from triggering the accordion action.

If you dont understand let me know and I can try to explain it better.

Answer 2

Try setting the parent container element to something else than <a> (such as <span>or <div>) and you can then insert link tags inside it that won't interfere with the accordion.

Because the current <a> is a jquery selector, it doesn't need to be a link. You may need to adjust the jquery slightly, in case it's calling the <a> tag instead of just a class.