views:

31

answers:

1

So, I've been trying to develop this multi-accordion news section for this site. It's actually all working, thanks to an insightful plugin. I've modified it a little bit so it works as I want it to, but I've run into two issues, one which is possibly CSS.

Issue #1:

The idea for the user is that when they view this page, they see all the recent headlines. They can also see who it has been posted by and how many comments have been made to this article. If they wish, they can then click on the headline and the field will expand into the article. They can then either make a comment or view the comments via clicking the View Comments link or clicking the "number of comments" link in the "Posted by..." area (a shortcut to the comments basically).

The problem I'm having is if I make the AUTHOR or the "0" comments a link, it breaks the accordion because the accordion uses an A CLASS to open it up. I'm looking for a fix, I've tried making it a H1 or a DIV but that also breaks it.

Issue #2:

This is a pretty picky one, but when you click the headline it expands, but at least in Firefox (haven't tested it in Chrome yet) the text jumps from the right and to the left, locking in place from which the CSS tells it to (padding-left). I don't know why it's exactly doing that, if anyone has any insight on that, it'd be appreciated.

A two-parter to this issue is when you open the Headline to the article and then decide to close the article by clicking on the Headline, parts of the accordion jumps from the darker purple to the light purple before the task is finished. I'm also interested fixing this, but this issue in its entirety are all pretty nit picky things.

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

Please if anyone has any advice or fixes, I'd appreciate it, I've been trying to get this all to work to the best of my ability, but I'm clearly no guru or expert. Thanks!

A: 

For issue #2 I think if you set a width to that div then it would not keep scooting around. Now you are just setting a display:block with no width and that expands as the accordion opens and pushes past the thumbnail. You also have padding-left: 65px set to that div and it is starting the padding to the left of the thumb but as it expands it sets that padding from the far left of that block. You could set a long bottom margin to your thumb or just remove that padding and allow the text to wrap it.

Issue #1 I dont really see the problem of it "breaking" the accordion. When I click on the comments link it just expands it as I would expect it to..

zac
Hmm, maybe I should have clarified exactly what Issue #1 rly is. I want to make AUTHOR and the "0" comments a link, but if I make them a link inside the A CLASS, it breaks the accordion (because it's a A CLASS). You might think, "Hey, just change it to a div..." I've tried that, which also breaks the accordion. Maybe I need to apply something else if I make it a DIV, but I can't figure this out. The headline (and/or the entire field) should be clickable to expand to the article.
Josh