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?
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.
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.
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.
Something like this? (Although I don’t like that site’s design in general )
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.