Top
Home

Sidways Accordian

A colorful, easy to modify accordion widget






<link href='https://fonts.googleapis.com/css?family=Sigmar+One' rel='stylesheet' type='text/css'>
<style>
* {
margin: 0;
padding: 0;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}

ul {
list-style: none;
}

input {
position: absolute;
top: -9999px;
left: -9999px;
}

label {
display: block;
float: left;
height: 330px;
width: 50px;
margin-bottom: 0px;
background: #fff;
text-align: left;
-webkit-transition: width 1s ease, background 0.5s ease;
-moz-transition: width 1s ease, background 0.5s ease;
-o-transition: width 1s ease, background 0.5s ease;
-ms-transition: width 1s ease, background 0.5s ease;
transition: width 1s ease, background 0.5s ease;
}

.MooseSlide {
display: block;
height: 330px;
width: 0px;
padding: 10px 0px;
float: left;
overflow: hidden;
color: #ffffff;
background: #336699;
font: 12px/1.5 Helvetica, Verdana, sans-serif;

-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;
}

.MooseSlide p, h2 {
width: 320px;
padding-left: 10px;
}

.MooseSlide img {
margin-top: 10px;
}
input[type="radio"]:checked ~ .MooseSlide {
width: 350px;
}


.rotate{
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
color:#fff;
font-size:24pt;
font-weight:bold;
font-family: 'Sigmar One', cursive;
}

</style>




<ul>
<li>
<input id="m00se1" type="radio" name="rad" style="background-color:#BC8B3E">
<label for="m00se1" style="background-color:BC8B3E"><p class="rotate" style="margin-top:200px;">WordPress</p></label>
<div class="MooseSlide" style="background-color:#E4A84B">
<h2>This is the Title for Slide One</h2>
<p>This is the Content Text for Slide One!</p>
</div>
</li>

<li>
<input id="m00se2" type="radio" name="rad" style="background-color:#94934B">
<label for="m00se2" style="background-color:94934B"><p class="rotate" style="margin-top:200px">Twitter</p></label>
<div class="MooseSlide" style="background-color:#BEBD60">
<h2>This is the Title for Slide Two</h2>
<p>This is the Content Text for Slide Two!</p>
</div>
</li>


<li>
<input id="m00se3" type="radio" name="rad" style="background-color:#893648">
<label for="m00se3" style="background-color:#893648"><p class="rotate" style="margin-top:200px">FaceBook</p></label>
<div class="MooseSlide" style="background-color:#C54E68">
<h2>This is the Title for Slide Three</h2>
<p>This is the Content Text for Slide Three!</p>
</div>

</li>
</ul>