<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>CodePen - Full Page Horizontal Accordion</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<!-- partial:index.partial.html -->
<!-- These variables help keep track of the input name and ID-->
<!-- currentTab helps keep track of each individual input-->
<!-- tabControlName is used as a unique identifier for the accordion-->
<ul>
<li>
<!-- Using radio inputs means only one can be selected at a time-->
<!-- The ID must be unique so the label will point to the input-->
<input id="rad1" type="radio" name="rad" checked="checked"/>
<label for="rad1">
<div>Just keep going with longer text</div>
</label>
<div class="accslide">
<div class="content">
<h1>Just keep going with longer text</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>
<!-- Using radio inputs means only one can be selected at a time-->
<!-- The ID must be unique so the label will point to the input-->
<input id="rad2" type="radio" name="rad"/>
<label for="rad2">
<div>Second panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Second panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>
<!-- Using radio inputs means only one can be selected at a time-->
<!-- The ID must be unique so the label will point to the input-->
<input id="rad3" type="radio" name="rad"/>
<label for="rad3">
<div>Third panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Third panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
<li>
<!-- Using radio inputs means only one can be selected at a time-->
<!-- The ID must be unique so the label will point to the input-->
<input id="rad4" type="radio" name="rad"/>
<label for="rad4">
<div>Fourth panel</div>
</label>
<div class="accslide">
<div class="content">
<h1>Fourth panel</h1>
<p>Lorem ipsum...</p>
</div>
</div>
</li>
</ul>
<!-- partial -->
</body>
</html>
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
height: 100%;
margin: 0;
}
body {
background: #1C1F2B;
color: #fff;
font-family: 'Open Sans', sans-serif;
}
/* LIST */
ul {
list-style: none;
}
/* FORM */
input {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
display: block;
float: left;
height: 100vh;
width: 40px;
overflow: hidden;
background: #30354a;
text-align: center;
font-size: 14px;
line-height: 50px;
-webkit-transition: background 300ms ease;
transition: background 300ms ease;
}
li:nth-child(even) > input + label {
background: #3a4059;
}
label:hover,
li:nth-child(even) > input + label:hover {
background: #2196f3;
color: #fff;
cursor: pointer;
}
input[type="radio"]:checked ~ label {
background: #2196f3;
color: #fff;
cursor: default !important;
}
/* SLIDES */
.accslide {
display: block;
height: 100%;
width: 0px;
padding: 10px 0;
float: left;
overflow-x: hidden;
font-sizes: 12px;
line-height: 1.5;
-webkit-transition: all 700ms ease;
transition: all 700ms ease;
}
.accslide * {
padding-left: 10px;
}
.accslide img {
margin-top: 10px;
}
input[type="radio"]:not(:checked) ~ label > * {
padding-left: 7px;
font-size: 1.2em;
white-space: nowrap;
-webkit-transform: rotate(90deg);
transform: rotate(90deg);
}
input[type="radio"]:checked ~ label > * {
display: none;
}
li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 80px);
}
li:nth-child(2):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 80px);
}
li:nth-child(1):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 120px);
}
li:nth-child(2):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 120px);
}
li:nth-child(3):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 120px);
}
li:nth-child(1):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 160px);
}
li:nth-child(2):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 160px);
}
li:nth-child(3):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 160px);
}
li:nth-child(4):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 160px);
}
li:nth-child(1):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 200px);
}
li:nth-child(2):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 200px);
}
li:nth-child(3):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 200px);
}
li:nth-child(4):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 200px);
}
li:nth-child(5):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 200px);
}
li:nth-child(1):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(2):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(3):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(4):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(5):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(6):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 240px);
}
li:nth-child(1):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(2):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(3):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(4):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(5):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(6):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(7):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 280px);
}
li:nth-child(1):nth-last-child(8) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(2):nth-last-child(7) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(3):nth-last-child(6) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(4):nth-last-child(5) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(5):nth-last-child(4) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(6):nth-last-child(3) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(7):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}
li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}