Vertical Panel like Files

Written by @kerixa 26 May 2020

If you want to divide your page vertically, you can use this script. Your page will look like a file with various sections. by clicking on each section it gets almost all of the screen width. See below!

Code Snippet:

                                                
                                                <!-- this script is provided by https://www.htmlbestcodes.com coded by: Kerixa Inc. -->
<style>
@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);
}
</style>
<ul>
<li>

<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>

<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>

<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>

<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><a target='_blank' href='https://www.htmlbestcodes.com' style='font-size: 8pt; text-decoration: none'>Html Best Codes</a>

Example:

About @kerixa

I am Krishna Eydat. I studied Software Engineering at University of Waterloo in Canada. I lead a few tech companies. I am passionate about the way we are connected. I would like to be part of something big or be the big deal!

Comments

Here you can leave us commments. Let us know what you think about this code tutorial!

0 / 300