Sideways Tabs and panels loading
HTML
<div id="sliding-panel1">
Panel 1
</div>
<div id="sliding-panel2">
Panel 2
</div>
<div id="sliding-panel3">
Panel 3
</div>
<div id="sliding-panel4">
Panel 4
</div>
<div id="menu">
<a href="#" class="button1">Tab 1</a>
<a href="#" class="button2">Tab 2</a>
<a href="#" class="button3">Tab 3</a>
<a href="#" class="button4">Tab 4</a>
</div>
CSS
body {
margin:0 auto;
padding: 0;
font-family:helvetica;
}
#menu {-webkit-transform-origin: bottom left; -webkit-transform: rotate(-90deg); position: fixed; top: 650px; left: 38px;}
#sliding-panel1, #sliding-panel2, #sliding-panel3, #sliding-panel4 {
width: 700px;
height: 700px;
margin: 0 0 0 60px;
position: absolute;
top:0;
padding: 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#d9d9d9), to(#b7b7b7));
-webkit-border-radius: 0 0 10px 10px;
bottom: 0;
display: none;
border-left: 1px solid #a6a6a6;
border-top: 1px solid #a6a6a6;
border-right: 1px solid #a6a6a6;
-webkit-box-shadow:inset 0 0 1px #f2f2f2;
color: #151515;
text-shadow: 1px 1px 1px #fff;
}
.button1, .button2, .button3, .button4{
display: block;
margin: 0 0 0 10px;
background: -webkit-gradient(linear, left top, left bottom, from(#1590b9), to(#0e617c));
text-decoration:none;
-webkit-border-radius: 0 0 10px 10px;
width: 150px;
text-align: center;
padding: 10px 0;
float: left;
color: #fff;
text-shadow: 1px 1px 1px #222;
border-right: 1px solid #0b495d;
border-left: 1px solid #0b495d;
border-bottom: 1px solid #0b495d;
-webkit-box-shadow:inset 0 0 1px #1cb3e5;
}
JavaScript
$(document).ready(function(){
$('.button1').click(function(){
$('#sliding-panel1').slideToggle('fast');
$('#sliding-panel2').slideUp('fast');
$('#sliding-panel3').slideUp('fast');
$('#sliding-panel4').slideUp('fast');
return false;
});
$('.button2').click(function(){
$('#sliding-panel1').slideUp('fast');
$('#sliding-panel2').slideToggle('fast');
$('#sliding-panel3').slideUp('fast');
$('#sliding-panel4').slideUp('fast');
return false;
});
$('.button3').click(function(){
$('#sliding-panel1').slideUp('fast');
$('#sliding-panel2').slideUp('fast');
$('#sliding-panel3').slideToggle('fast');
$('#sliding-panel4').slideUp('fast');
return false;
});
$('.button4').click(function(){
$('#sliding-panel1').slideUp('fast');
$('#sliding-panel2').slideUp('fast');
$('#sliding-panel3').slideUp('fast');
$('#sliding-panel4').slideToggle('fast');
return false;
});
});