Accordion expanded when not hovering

Hi guys

I was wondering… I would like the accordion on to be expanded at all times showing the first div (panel) called “Bannere” on load and when not hovering. When hovering to another panel, obviously this needs to be expanded

Problem is… I can´t figure out how to. Can anyone assist me here?

Just give that first div a class and find the CSS rule that makes it show. I believe you show it v ia display:block. Give that inner <div> of banner, a class of like…“show” and make that have display:block. Sorry gotta run to work.

That´s what I thought, but didn´t do the trick… Off course this had to be complicated :wink:

Ah sorry, I should have mentioned specifcity issue, along with allowing the <li> to increase in width to not cut off the image :). Add this CSS in. Change classes as you see fit.

.horizontalaccordion > ul
.horizontalaccordion > ul  li /*body in there to give it slightly higher specificity*/

The first part widens the <li> to allow more width in. The second makes the image show instead of a white space that would otherwise be there.

Now update your HTML

<li class="active">
										<div class="active"><img src="/beta/images/toppbanner.jpg"/></div>

I used the same class=“active” twice, though I differentiated it in the CSS using an element before the .active. I’d recommend changing the c lass to something different (whatever you want) :). That should get it working.

thanks, but that just pushes the other divs out of proportions cause the floating layout to go nuts. Maybe I was a little unclear. I want the other panels and <li> to be pushed left when hovering, covering the 1. panel (“bannere”). Can this be achieved?

I must have misunderstood. I still don’t see what you want. The website now as I’m viewing it, has the image showing directly (without a hover needed). This is what I assume you wanted. With what you want, if you hover, you want hte image to extend out to hte left instead?

I can’t really picture what you want besides what your website is displaying right now.

I think I know what you mean.

Something like this? (Although I don’t like that site’s design in general :confused: )

I had an idea to do something like that from pure CSS. It was like an accordion, just on hover…nevermind. It would take too long to explain and I don’t think that I even know how to explain.

Take a look at their source (w/out copying, ofc). The line you want is around line 2638 of their only stylesheet.


TehYoyo… Thats pretty much what I was thinking. Thanks for the link. I´ll see if I could recreate that in some way

No problem. Always happy to help.