Is there an easier way with jQuery accordions?

Question

I've been struggling with a feature I've been trying to create for sometime. The idea here is that the user sees the little thumbnail + headline, as well as the Posted By information. They can then click on the headline to expand to the article or click on the "Comments" link to expand directly to the comments made on the article. Or, if they want they can view comments by clicking on the headline(to expand to the article), then click on View Comments (to expand to the comments). In the end, a modular yet flexible and functional open/close system to view latest news.

Here is what I've been working on: (I put all my code in one place so its easier on whomever may look at this to view) http://notedls.com/pointtest.html

This is what I'm shooting for, but it's far from what I want ;( It's using the jQuery 1.6 plugin, which 1.8 is out but I'm far from being a master or expert at this and I don't think I could build from the ground up. I've already edited this plugin to get it to work like this, but as you can see, the AUTHOR and Comments start making shit hit the fan ;; It's because the code is calling the "A TAG" for the header; which is the headline.

Does anyone know any easier way to achieve what I'm envisioning or possible a way to fix this current code? I'm pretty desperate at this point ;;

Answer 1

Something like this:?

http://jsbin.com/elawu

It's an accordion. Each "first element", or header, is a div. Within that header is an article headline, an author, and a clickable span listing the number of comments for that article.

Each "second element", or content portion of the accordion, is also a div. Within that div there is an article content div, and comments div. Within the comments div there is a comment header, again clickable, and another content div. The hierarchy looks like this:

<div id='outer-accordion'>
   <div class='header'>
      <p>Article headline</p>
      <p>by: Author</p>
      <p><span class='clickable'># comments</span></p>
   </div>
   <div class='content'>
      <div class='article'>...</div>
      <div class='comments'>
        <p><span class='clickable'># of comments</span></p>
        <div class='comment-content'>
           comment #1
           comment #2
           ...
        </div>
      </div>
   </div>

   ....

When the page starts all the comment content divs get hidden via $('div.comments div').hide(); Also the accordion gets set up, and the accordion onaccordionchange and onaccordionchangestart events get bound. Finally, a click event is registered for the Comments links.

If you click anywhere on the header, it pops open the associated accordion content tab. If you click on the comments link in the header, it opens the accordion, and opens the comments div within the content div.

Any time an accordion tab gets opened, the comments link in the header gets hidden. Any time an accordion tab closes, the comments link in the header gets shown.

Clicking on the comments link within the accordion content div, toggles the actual comments.