CSS ANIMATED PANELS

SHOW/HIDE PANELS

HTML

<!doctype html>
<html>
<body>
    <h1>CSS3 Animated Panels</h1>

<div id="panel">
<div class="data">

<div id="data0">
<h3>DEFAULT MESSAGE</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris dictum imperdiet blandit? Curabitur nulla magna, commodo ac tempus eu, gravida porta mauris? Fusce ultricies euismod scelerisque.</p>
</div>

<div id="data1">
<h3>DATA 1</h3>
<p>Maecenas in quam at justo lobortis aliquet? Proin pulvinar nunc nec quam auctor et ultricies purus lacinia.</p>
</div>

<div id="data2">
<h3>DATA 2</h3>
<p>Fusce ultricies euismod scelerisque. Sed ac ante ut dui eleifend pulvinar sit amet sed lacus? Sed rutrum accumsan sapien; vitae sodales nisi rhoncus vel.</p>
</div>

<div id="data3">
<h3>DATA 3</h3>
<p>Sed ac ante ut dui eleifend pulvinar sit amet sed lacus? Sed rutrum accumsan sapien; vitae sodales nisi rhoncus vel. Nunc sed felis nec neque mattis varius. Vivamus bibendum auctor felis a sodales. Maecenas in quam at justo lobortis aliquet? Proin pulvinar nunc nec quam auctor et ultricies purus lacinia. </p></div>

<!--end data --></div>

<ul id="menu">
<li class="active"><a title="DATA 0" href="#data0">&#9658;</a></li>
<li><a title="DATA 1" href="#data1">&#9658;</a></li>
<li><a title="DATA 2" href="#data2">&#9658;</a></li>
<li><a title="DATA 3" href="#data3">&#9658;</a></li>
</ul>

<!--end panels--></div>
</body>
</html>

CSS

/**ANIMATED PANEL STYLES**/
#panel {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#F00
position:relative;
top: 0;
left: 0;
}

#panel ul#menu {
list-style:none;
margin:25px 0;
padding:0;
}

#panel #menu li a {
/**style**/
list-style:none;
text-decoration:none;
text-align:center;
font-size: 55px;
font-weight:bold;
line-height: 1.25;
color:#CAD3D3;
background-color: #004A43;
border: 3px solid #004A43;
width: auto;
margin: 0 9px 0 9px;
padding:0 5px 0 7px;
float:left;
/**shadows**/
box-shadow: 4px 3px 8px #666;
/**round borders**/
-moz-border-radius: 40px;
-webkit-border-radius:40px;
-ms-border-radius: 40px;
border-radius: 40px;
/**CSS Transitions for various browsers**/
-webkit-transition:all 1s ease-in;
-moz-transition:all 1s ease-in;
-ms-transition:all 1s ease-in;
-o-transition:all 1s ease-in;
transition:all 1s ease-in;
}

#panel #menu li a:hover {color: #90D5CD;}

/**active menu**/
#panel #menu li.active a {
outline:none;
border: 3px solid #FF9900;
background-color: #CAD3D3;
color: #FF9900;
/**shadows**/
text-shadow: 4px -3px 5px #666;
box-shadow: inset 3px 3px 2px #666;
/**transform for various browsers**/
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform:rotate(-90deg);
}

/**clear floats**/
#panel #menu:after {
content: ".";
height:0;
display:block;
visibility:hidden;
clear:left;
}

/**panel data**/
#panel .data {
padding: 12px;
font-size: 14px;
width: 400px;
color: #004A43;
border: 4px double #FF9900;
box-shadow: 3px 3px 10px #666;
position:relative;
top: 10px;
left: 5px;
}

JavaScript

$(document).ready(function() {
    //hide data
    $("#data1,#data2,#data3").hide();
    $("#panel #menu li a").click(function() {
        //show urls
        var link = $(this).attr('href');
        $(link).show('slow').siblings().hide('slow');
    });
    //switch classes on menu
    $("#panel #menu li").click(function() {
        $(this).addClass('active').siblings().removeClass('active');
    });
});