Bumpy Lists for Full Style Lists Content

Banyak cara untuk menyembunyikan konten! Beberapa yang sering di temui adalah dengan trik spoiler atau accordion Gue dapat trick bumpy lists! Deretan lists yg disembunyikan mirip dengan accordion! Kenapa dikatakan bumpy karena ada efek mental-mental ketika melakukan klik tutup bukanya ;)) Untuk lebih jelasnya silahkan lihat demo Bumpy lists: codepen.io/vsync/pen/EaObde Singkat cerita kalau sobat mempunyai list yg teramat panjang, maka solusinya sembunyikan dengan cara ini saja ;)

.bumpy {
list-style: none;
padding: 0;
margin: 10px auto;
width: 100%;
color: #fff;
}
.bumpy > li {
display: block;
}
.bumpy > li > input {
display: none;
}
.bumpy > li > input:checked ~ label {
box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
-webkit-animation: none;
animation: none;
-webkit-transition: .1s;
transition: .1s;
}
.bumpy > li > input:checked ~ label > .toggleIcon::before {
opacity: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
text-shadow: 0 0 3px #333;
}
.bumpy > li > input:checked ~ label > .toggleIcon::after {
-webkit-transform: none;
transform: none;
-webkit-transform: rotate(180deg);
transform: rotate(180deg);
}
.bumpy > li > input:checked ~ .options > ul {
margin-bottom: .7em;
}
.bumpy > li > input:checked ~ .options > ul > li {
margin: 0;
opacity: 1;
}
.bumpy > li > label {
display: block;
padding: 1em 1em 1em 3em;
background: #242C35;
position: relative;
z-index: 1;
border-radius: 3px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 0 0 #FFF;
-webkit-transition: .5s;
transition: .5s;
}
.bumpy > li > label > .toggleIcon {
position: absolute;
width: 1.2em;
height: 1.2em;
left: .8em;
top: 0;
bottom: 0;
margin: auto;
}
.bumpy > li > label > .toggleIcon::before, .bumpy > li > label > .toggleIcon::after {
content: '';
position: absolute;
background: #ccc;
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 1.4);
}
.bumpy > li > label > .toggleIcon::before {
width: 2px;
height: 100%;
left: calc(50% - 2px);
margin-left: 1px;
}
.bumpy > li > label > .toggleIcon::after {
width: 100%;
height: 2px;
top: calc(50% - 1px);
}
.bumpy > li > .options {
position: relative;
overflow: hidden;
}
.bumpy > li > .options > ul {
font-size: .9em;
list-style: none;
margin: -1em .6em 1em;
padding: 0;
border-radius: 0 0 4px 4px;
border: 5px solid rgba(255, 255, 255, 0.15);
-webkit-transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
transition: 0.3s cubic-bezier(0.45, 0.01, 0.27, 2);
-webkit-perspective: 600px;
perspective: 600px;
}
.bumpy > li > .options > ul > li {
padding: .5em 1em;
margin-top: -5em;
border-bottom: 1px solid #eee;
position: relative;
cursor: pointer;
background: #F6F6F6;
color: #777;
-webkit-transition: 0.3s ease;
transition: 0.3s ease;
-webkit-transition-property: margin, opacity;
transition-property: margin, opacity;
}
.bumpy > li > .options > ul > li:first-child {
padding-top: 2em;
}
.bumpy > li > .options > ul > li:last-child {
border: 0;
border-radius: 0 0 3px 3px;
}
.bumpy > li > .options > ul > li:hover {
background: lightyellow;
box-shadow: 5px 0 rgba(255, 255, 224, 0.1), -5px 0 rgba(255, 255, 224, 0.1);
}
@-webkit-keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}
@keyframes bumpUp {
20% {
-webkit-transform: translateY(-4px);
transform: translateY(-4px);
}
100% {
-webkit-transform: none;
transform: none;
}
}

<ul class="bumpy">
<li>
<input type="checkbox" id="item1"/>
<label for="item1">
<div class="toggleIcon"></div>BUMPY SATU
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item2"/>
<label for="item2">
<div class="toggleIcon"></div>BUMPY DUA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item3"/>
<label for="item3">
<div class="toggleIcon"></div>BUMPY TIGA
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
<li>
<input type="checkbox" id="item4"/>
<label for="item4">
<div class="toggleIcon"></div>BUMPY EMPAT
</label>
<div class="options">
<ul>
<li>List I</li>
<li>List II</li>
<li>List III</li>
</ul>
</div>
</li>
</ul>

Kalau sobat mau menambahkan kotak list, perhatikan uniq id yg berada di input dan label!

<ul class="bumpy">
    <input type="checkbox" id="UNIQ-ID"/>
    <label for="UNIQ-ID">
      <div class="toggleIcon"></div>BUMPY 
    </label>
    <div class="options">
      <ul>
        <li>List.</li>
        <li>List..</li>
        <li>List...</li>
      </ul>
    </div>
  </li>
</ul>

BONUS...

flat accordion - (All) CSS Transforms Playground! - Simple side menu - Menu Animated Dropdown and Icon - Tuts+ CodePen Challenge #6: Transformers - Search input context animation - Beautiful Context Menu - Hover Color Random with out Default - Button Shine Effect CSS - HTML5 Table with Sticky Headers - - Daily UI SUBSCRIBE - CSS Only Shadow Scrolling Effect - CSS Fizzy Button - CSS Particle Effects - Drag to transform - Beach Escape - Punk Lettering - Blurred, Invisible Ink, and Redacted text (CSS only) - CSS Ribbon - Anchor Click Canvas Animation - MacBook scrolling animation on hover - DVD screensaver (marquee edition) - CSS3 ленточки - Releasing "Recent Comments Widget" For Blogger - Drake CSS Albums - The Cutting-Edge CSS3 Features That Are Essential to Modern Web Design - Quick Tip: Using CSS Counters to Style Incremental Elements - Creating Wavescroll