Javascript ribbon hidden behind invisible box

Question

So I have two images, one is a half of a ribbon and the second one is a full ribbon with facebook etc links on it. I need to have the first one in the middle of a page, so when you click it it would expand out. I figured i need to use hidden overlay or something but I am totally new at javascript.

Can someone provide an example or help me with this?

Answer 1

I tried to understand what you want and tell me if this is what you meant.

You can wrap the two images in two sepatare divs and then wrap them in a div with position relative.

Then you give to the two divs position absolute.

On the click of the first div you change the second div left position (or the top if you want a vertical effect).

Here is the html with divs only:

<div style="position: relative">
    <div id="frontDiv">
        aaaaaaaaaaaa
    </div>
    <div id="backDiv">
        bbbbbbbbbbb
    </div>
</div>

Here the CSS:

#frontDiv{
    height: 20px; width: 45px; 
    background: red; position: absolute; 
    z-index: 1; left: 0px; top: 0px;
}

#backDiv{
    height: 20px; width: 30px; 
    background: blue; position: absolute; 
    z-index: 0; left: 0px; top: 0px;
}

And here the javascript (in jQuery):

$("#frontDiv").click(function(){
    $("#backDiv").animate({"left":"45px"}, 300); //{"top":"20px"} for vertical effect
});

At the end you can position the wrapper div wherever you want.

Full example at this fiddle: http://jsfiddle.net/w7RVe/