Accordion expanded when not hovering

HTML & CSS
1

Hi guys

I was wondering… I would like the accordion on http://www.openeye-design.com/beta/ 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?

2

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.

3

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

4

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 li.active
{
	width:480px!important;
}
.horizontalaccordion > ul  li  div.active /*body in there to give it slightly higher specificity*/
{
display:block
}

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">
										<h3>Bannere</h3>
										<div class="active"><img src="/beta/images/toppbanner.jpg"/></div>
									</li>

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.

5

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?

6

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.

7

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

8

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

9

No problem. Always happy to help.

~TehYoyo