<!DOCTYPE html>
<html xmins="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<article class="accordion">
<section id="acc1">
<h2><a href="#acc1">Title One</a></h2>
<p>This content appears on page 1.</p>
</section>
<section id="acc2">
<h2><a href="#acc2">Title Two</a></h2>
<p>This content appears on page 2.</p>
</section>
<section id="acc3">
<h2><a href="#acc3">Title Three</a></h2>
<p>This content appears on page 3.</p>
</section>
<section id="acc4">
<h2><a href="#acc4">Title Four</a></h2>
<p>This content appears on page 4.</p>
</section>
<section id="acc5">
<h2><a href="#acc5">Title Five</a></h2>
<p>This content appears on page 5.</p>
</section>
</article>
</body>
</html>article.accordion
{
display: block;
width: 43em;
margin: 0 auto;
background-color: #666;
overflow: auto;
border-radius: 5px;
box-shadow: 0 3px 3px rgba(0,0,0,0.3);
}
article.accordion section
{
position: relative;
display: block;
float: left;
width: 2em;
height: 12em;
margin: 0.5em 0 0.5em 0.5em;
color: #333;
background-color: #333;
overflow: hidden;
border-radius: 3px;
}
article.accordion section h2
{
position: absolute;
font-size: 1em;
font-weight: bold;
width: 12em;
height: 2em;
top: 12em;
left: 0;
text-indent: 1em;
padding: 0;
margin: 0;
color: #ddd;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
-o-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
article.accordion section h2 a
{
display: block;
width: 100%;
line-height: 2em;
text-decoration: none;
color: inherit;
outline: 0 none;
}
article.accordion section:target
{
width: 30em;
padding: 0 1em;
color: #333;
background-color: #fff;
}
article.accordion section:target h2
{
position: static;
font-size: 1.3em;
text-indent: 0;
color: #333;
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
article.accordion section,
article.accordion section h2
{
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-ms-transition: all 1s ease;
-o-transition: all 1s ease;
transition: all 1s ease;
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.