SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Accordion expanded when not hovering

    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. #2
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  3. #3
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thatīs what I thought, but didnīt do the trick... Off course this had to be complicated

  4. #4
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code:
    .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
    Code:
    <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.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  5. #5
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #6
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,621
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by monofon View Post
    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.
    Always looking for web design/development work.
    Willing to do it cheap to build portfolio!

  7. #7
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    I think I know what you mean.

    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.

    ~TehYoyo

  8. #8
    SitePoint Enthusiast
    Join Date
    Nov 2009
    Posts
    34
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    TehYoyo... Thats pretty much what I was thinking. Thanks for the link. Iīll see if I could recreate that in some way

  9. #9
    <title class="lol"> bronze trophy TehYoyo's Avatar
    Join Date
    Feb 2012
    Location
    Northeast Chicago Suburbs
    Posts
    806
    Mentioned
    18 Post(s)
    Tagged
    1 Thread(s)
    No problem. Always happy to help.

    ~TehYoyo


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •