javascript - Jquery drag out tabbed content

Question

The Idea

I am trying to build a prototype of a touch-screen TV remote. I am using Jquery with JqueryUI.

The remote looks like a tablet. I have taken 20% of the screen, in landscape, for dedicated volume as well as other buttons. These will always be visible. The remaining 80% will be tabbed sections that the user will drag out to see. These tabs will perform similar to the android quick settings menu at the top of the screen. I am looking to have atleast 4 tabs.

I tried to draw what I am looking to build.

All closed tabs

drag to open

first tab open

I also have a jsfiddle of my current attempt

Here is the tabbed content

<div id="main" class="main-container">
    <div id="tab1" class="tab-container" style="position:relative; left:729px;">
        <p>tab heading</p>
        <div class="tab-content">
            Tab 1
        </div>
    </div>
    <div id="tab2" class="tab-container" style="position:relative; left:729px; top:-412px;">
        <p>tab heading</p>
        <div class="tab-content">
            Tab 2
        </div>
    </div>
</div>

Here is the CSS

.tab-container {
    width:100%;
    height:100%;
}
.tab-container p{
    height:50px;
    width:10%;
    float:left;
    border: 1px solid blue;
    /*-webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);*/
    cursor:pointer;
    background:beige;
}
.tab-content {
    border:1px solid purple;
    float:left;
    height:100%;
    width:85%;
    margin:0;
    background:blue;
}

The Problem

I cannot seem to place the tabbed content on top of each other. I am then trying to place the tab headings progressively further down the tablet like in the drawing. My JSFiddle only looks correct when it is closed as the tabbed content is not on top of each other.

If someone could please push me in the right direction it is greatly appreciated.

Thanks!