0

I am creating a website for college and I was wondering how hard it would be to make an expanding tab on the side of the website? So when the user hovers the mouse the tab, it expands and more information can be viewed.

A bit like this:

enter image description here

Thanks in advance!

xiiJaMiiE
  • 349
  • 2
  • 4
  • 12
  • 1
    Have you tried to get this to work on your own yet? I would read more about the `:hover` pseudo css selector, and css `transition` – badAdviceGuy Feb 01 '14 at 22:33
  • I haven't tried it yet, is that something I should try? and I sort of know how to use the :hover pseudo and transition. Are these the main parts of the code I need? – xiiJaMiiE Feb 01 '14 at 22:35
  • 1
    I would read a few websites on `:hover` and go from there, break the feature you're trying to build down into smaller bits and figure it out one at a time. – badAdviceGuy Feb 01 '14 at 22:37
  • Okay I will do, thanks for your help! – xiiJaMiiE Feb 01 '14 at 22:39

1 Answers1

1

another user had this same question with a very good answer. The FULL sample code that came from that answer is provided here:

http://jsfiddle.net/Bq6eK/13/

but the crux of what you wanted to know is that this is the essential CSS code you need (copied from the jsfiddle):

transition: height 2s;
-moz-transition: height 2s; /* Firefox 4 */
-webkit-transition: height 2s; /* Safari and Chrome */
-o-transition: height 2s; /* Opera */

SOURCE (other user's question): Add CSS3 transition expand/collapse

Community
  • 1
  • 1
user3246890
  • 139
  • 7