jQuery code for sliding div (accordion)

Question

I am looking for some good jQuery, XHTML & CSS code to achieve the effect as seen in the following image:

http://i48.tinypic.com/a3o4sn.jpg

Obviously this is a static image, what is supposed to happen is the text and the transparent background is hidden, and when you put your mouse over the image it slides up into view and down again onmouseout.

I think this is an accordion, can anyone point me in the right direction (or maybe you've seen another site that does this)?

Answer 1

My approach to this effect is to have a div with overflow: hidden and the transparent black div with a top margin that puts it "outside" the container." Using .hover() you can tell the black div to slide up when the mouse is over the container div, and to slide away again when the mouse leaves.

Markup:

<div id='container'>
   <div id='slider'>Some Text</div>
</div>

Styles:

div#container {
    height: 100px;
    width: 100px;
    overflow: hidden;
}

div#slider {
    width: 100px;
    height: 40px;
    margin-top: 100px;
    background: black;
}

And your script:

$('#container').hover (
   function () {
      $('#slider').css('margin-top', '60px'),
      $('#slider').css('margin-top', '100px');       
);

I forget if you have to put the 60px in quotes or not, or if you have to pass 60 as an int, play around with it, but hopefully this gets you started.

Answer 2

I've recently used a jquery plugin that does something quite similar. You may find the plugin does all you need, or look at the source to see how the slide-in effect is achieved (although, of course, there's more than one way to do just about anything).

The plug-in is called Showcase

Its home page has more info and demo and tutorials

Finally, as an added demo, here's the site where I used it.

HTH

Answer 3

Your may be interested in this great resource: Sliding Boxes and captions

DEMO