Кнопка активирована div слайд идет ниже, чем

Question

Я пытался создать интерфейс, где, когда вы нажимаете кнопку, полный размер div со всем содержимым заполняет весь экран. Есть два раздвижных divs, он работает в одну сторону, но, наоборот, div скользит под первым div.

Я пытался использовать toggle - и переключился на css, который увеличивает свойство ширины DIVS, чтобы захватить экран.

Есть ли способ сделать это? Вот мой код и скрипку на дне:

HTML:

<div class="container"> 
<div class="left"> 
<div class="one"> 
<a href="#"><div class="openone"> 
<div class="vertical-text-one">OPEN ONE</div> 
</div></a> 
ONE</div></div> 
<div class="right"> 
<div class="two"> 
<a href="#"><div class="opentwo"> 
<div class="vertical-text-two">OPEN TWO</div> 
</div></a>TWO 
</div></div> 
<div class="header" > 
TOP 
</div> 
</div> 

Javascript:

$(document).ready(function(){ 

$('.openone').click(function(e){ 
$('.left').toggleClass('clicked'); 
}); 
$('.opentwo').click(function(e){ 
$('.right').toggleClass('clicked'); 
}); 
}); 

CSS сниппет:

.left{ 
background-color: #06C; 
width:50%; 
height: 100%; 
overflow:hidden; 
float:left; 
z-index: 1; 
transition: width 1s; 

} 
.left.clicked { 
width: 98%; 
background-color: #06C; 
z-index: 100; 

} 
.right{ 
background-color: #3AD; 
float:right; 
width:50%; 
height: 100%; 
z-index: 1; 
transition: width 1s; 
} 
.right.clicked { 
width: 98%; 
background-color: #3AD; 
z-index: 100; 
overflow: hidden; 
} 
.two{ 
position:absolute; 
top: 110px; 
} 
.one{ 
position:absolute; 
top: 110px; 
} 
.openone { 
position: relative; 
height: 50%; 
width:200px; 
background-color: #06C; 
left: 101%; 
} 

.opentwo { 
position: relative; 
height: 50%; 
width:200px; 
background-color: #3AD; 
left: 0px; 
} 

http://jsfiddle.net/hmyLrzta/19/

Answer 1

Просто расширить ваш кодирование с этим:

$(document).ready(function(){ 

    $('.openone').click(function(e){ 
     $('.left').toggleClass('clicked'); 
     $('.right').toggleClass('hidden'); 
    }); 
    $('.opentwo').click(function(e){ 
     $('.right').toggleClass('clicked'); 
     $('.left').toggleClass('hidden'); 
    }); 
}); 

CSS:

.hidden { 
    display: none; 
} 

Это будет оказывать не активной панели невидимую с помощью display: none;

http://jsfiddle.net/hmyLrzta/21/