Question

I’m pretty sure I’m having a CSS issue, but I just can’t figure out how to correct it. Currently, I have these accordions working perfectly, they collapse, expand, expand again when told to etc.

The problem I’m having is aligning the content within these accordion divs. Ideally, when everything is default (collapsed) all I want seen is the thumbnail image and the Headline. Then if the user wishes, they click on the headline and it expands and if they want to make a comment or view comments, they can click once again to expand that.

Here’s the thing, I have to make the height 62px so everything will fit in and just not float all over the place. This creates a problem with the “View Comments” to “Text Here” area, as you can tell it has outrageous space between the two.

The other issue is, as I currently have it I’m forcefully indenting the article text so that it doesn’t TEXT WRAP underneath the thumbnail image. Basically, I want it split into 2 columns so nothing ever goes beneath the image, but working with this accordion and divs inside the divs it’s proving to be difficult for me.

Answer 1

You can define this in your CSS to set the height:

.acc2 { height: auto !important; }

Since your child accordions have an acc2 class on their header, this will override, restoring a default height to match the text.