Question

I’m not really sure how to word what I’m looking for in search engine terms, so what I’m trying to do is:

I want to have a division, or two if that’s what it takes, in the center of the page that when clicked seperates. Top portion slides up, bottom portion slides down and it reveals the website content in the middle.

---

---

---

I’m not exactly sure how word my search for something that does that properly. I’ve seen a few websites that have variations of this. Only ones that open left/right though. I’m sure this is difficult, but any help towards achieving this would be greatly appreciated.

Thanks in advance, Bc.

Answer 1

I think this is what you need : http://jsfiddle.net/WQCav/

HTML :

<div id="hider1" style="position:absolute;background-color:black;width:100%;height:50%;" onclick="displayWebsite();" ></div>
<div id="hider2" style="background-color:black;width:100%;height:50%;position:absolute;top:50%;" onclick="displayWebsite();" ></div>
HI

JS :

var up,down;
function displayWebsite()
{
    if(typeof up!=="undefined")return;
    up=setInterval(goUp,20);
    down=setInterval(goDown,20);
}
function goUp(x)
{
    var h1=document.getElementById("hider1");
    if(h1.offsetHeight<=80)
    {
        clearInterval(up);
        return;
    }
    h1.style.height=parseInt(h1.style.height)-1+"%";
}
function goDown(x)
{
    var h2=document.getElementById("hider2");
    if(h2.offsetHeight<=80)
    {
        clearInterval(down);
        return;
    }
    h2.style.top=parseInt(h2.style.top)+1+"%";
    h2.style.height=parseInt(h2.style.height)-1+"%";
}

CSS :

html,body
{
    width:100%;
    height:100%;
}