CSS 3 Horizontal Accordion

Question

I was wondering if jQuery offered a horizontal accordion in a way that is simple... much like the way they offer the regular accordion function. There are some plugins available after searching the web. But, I was turned on to a horizontal accordion that functions entirely with CSS 3. A demo of it can be found hereSince I'm still sort of new to CSS 3, I'm still not entirely sure how this works. I've been able to style it for the most part to my liking. But, as far as the slide effects, it seems that the content inside of the

.accordion>ul>li>div 

is still visible when the tab is closed. You can find a working example of my problem here. I've used firebug to try to understand what's going on and thought that it might have something to to with the z-index. But, that didn't do much of anything for me.

Thanks,

Lance

Answer 1

You need to set a background color on .accordion>ul>li>div. Currently it is transparent and therefore everything below "shines through".

Answer 2

I think that you refer to the tabs in the middle of the site, inside the "Stats": "pounds per game", "rebounds per game", etc...

I've tried to modify your css and putting the next properties and I think it works :)

.accordion > ul > li {position:relative;}<br/>
.accordion > ul > li div {position:relative;background-color:#fff;}