javascript - Jqueryはタブ付きコンテンツをドラッグアウトします

Question

アイデア

タッチスクリーン TV リモコンのプロトタイプを作成しようとしています。JqueryUIでJqueryを使用しています。

リモコンはタブレットのようです。画面の 20% を横向きにして、専用の音量やその他のボタン用に使用しました。これらは常に表示されます。残りの 80% は、ユーザーがドラッグして表示するタブ付きセクションになります。これらのタブは、画面上部の Android クイック設定メニューと同様に機能します。少なくとも 4 つのタブを探しています。

作りたいものを描いてみました。

すべての閉じたタブ

ドラッグして開く

最初のタブを開く

私はまた、私の現在の試みのjsfiddleを持っています

タブコンテンツはこちら

<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>

ここに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;
}

問題

タブ付きのコンテンツを重ねて配置できないようです。次に、図のようにタブの見出しをタブレットの下に徐々に配置しようとしています。タブ付きのコンテンツが重なり合っていないため、JSFiddle を閉じたときにのみ正しく見えます。

誰かが私を正しい方向に押してくれれば、それは大歓迎です。

ありがとう！