Pure CSS Accordion, Show-Hide or Toggle for You

Sebetulnya tutorial membuat toggle, accordion, show hide atau apapun namanya menggunakan CSS sudah banyak yang menerangkan. Sehingga keputusan dalam menerapkan ke dalam template disesuaikan saja dengan kebutuhan masing² Karena sangkin banyaknya, maka saran AA pilihlah kode yg simpel sederhana namun tidak melepaskan faktor gaya full stylish :D
Kesempatan sekarang AA Koben akan berbagi kembali accordion/toggle/show-hide murni CSS pilihan, dan kebetulan source yg ada semua di peroleh dari web front end developer playground & code editor in the browser is codepen.

Pure CSS Accordion (Checkbox Hack)

.title h3 {
margin: 0;
font-size: 1.4em;
line-height: 1.2;
}
label {
display: block;
overflow: hidden;
}
.title {
padding: 1em 1.2em;
position: relative;
z-index: 599;
background: #fbfbfb;
border-bottom: 1px solid #eee;
-webkit-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.title:hover {
cursor: pointer;
background: #f5f5f5;
}
.content {
position: relative;
padding: 0;
max-height: 0px;
line-height: 1.5;
border-bottom: 1px solid #eee;
-webkit-transition: max-height 0.3s linear;
transition: max-height 0.3s linear;
}
.content p {
position: relative;
padding: 1em;
margin: 0;
-webkit-transform: scale(0);
-ms-transform: scale(0);
-o-transform: scale(0);
transform: scale(0);
opacity: 0;
-webkit-transition: all 0.55s ease;
transition: all 0.55s ease;
}
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]:checked + .title {
background: #c3f7ea;
}
input[type="checkbox"]:checked + .title + .content {
max-height: 555px;
}
input[type="checkbox"]:checked + .title + .content p {
-webkit-transform: scale(1);
-ms-transform: scale(1);
-o-transform: scale(1);
transform: scale(1);
opacity: 1;
}

<label for="chk-1">
<input id="chk-1" type="checkbox" checked/>
<div class="title">
<h3>Accordion Heading One</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

<label for="chk-2">
<input id="chk-2" type="checkbox" />
<div class="title">
<h3>Accordion Heading Two</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

<label for="chk-3">
<input id="chk-3" type="checkbox" />
<div class="title">
<h3>Accordion Heading Three</h3>
</div>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</label>

codepen.io/cmcg/full/DsbqG

Jika kepingin menambahkan konten accordion, sobat harus perhatikan<label for="XXX">
<input id="XXX" type="checkbox" />Unik ID tersebut harus berbeda antara satu kontent dengan konten accordion lainnya.

Pure CSS Toggle

.togglebox {
width: 300px;
height: 400px;
margin: 0 auto;
background: #3c566f;
}
.togglebox input[type="radio"] {
position: absolute;
opacity: 0;
}
.togglebox label {
position: relative;
display: block;
height: 50px;
line-height: 50px;
padding: 0 20px;
font-size: 14px;
font-weight: bold;
color: rgba(255, 255, 255, 0.5);
background: #2e4155;
cursor: pointer;
}
.togglebox label:hover {
background: #1f2d3a;
}
.togglebox label:after {
content: '\00ab';
top: 0px;
right: 20px;
display: block;
position: absolute;
box-sizing: border-box;
}
.togglebox .content {
height: 0;
overflow: hidden;
}
.togglebox input[type="radio"]:checked ~ label {
color: rgba(255, 255, 255, 0.8);
}
.togglebox input[type="radio"]:checked ~ label:after {
transform: rotate(90deg);
}
.togglebox input[type="radio"]:checked ~ .content {
height: 150px;
transition: all 1s ease-in-out;
}
.togglebox p {
margin: 15px 0;
padding: 0 20px;
font-size: 11px;
line-height: 1.5;
color: rgba(255, 255, 255, 0.8);
}

<div class="togglebox">
<div>
<input id="radio1" type="radio" name="toggle" checked="checked"/>
<label for="radio1">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio2" type="radio" name="toggle"/>
<label for="radio2">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio3" type="radio" name="toggle"/>
<label for="radio3">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio4" type="radio" name="toggle"/>
<label for="radio4">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
<div>
<input id="radio5" type="radio" name="toggle"/>
<label for="radio5">Title Here</label>
<div class="content">
<p>ADD CONTENT HERE</p>
</div>
</div>
</div>

codepen.io/MattH22/full/gxvhL

Linknya hilang!!!

.isi-judul {
color: #fff;
position: relative;
background: #60A0FF;
margin: 0;
padding: 10px 10px 10px 40px;
display: block;
width:auto;
cursor: pointer;
font-size: 18px;
border-bottom: 1px solid #fff;
}
.isi-konten {
height: 0;
opacity: 0;
margin: 0px 0;
padding: 0px 15px;
overflow: hidden;
position: relative;
background: #f2f2f2;
-webkit-transition: .7s ease;
-o-transition: .7s ease;
transition: .7s ease;
}
.lambang:checked ~ .isi-konten{
height: auto;
opacity: 1;
}
.buka {
color:#fff;
z-index: 1;
font-size: 2em;
line-height: 100%;
position: absolute;
margin: 5px 0 0 10px;
-webkit-transition: .1s ease;
-moz-transition: .1s ease;
-o-transition: .1s ease;
transition: .1s ease;
}
.lambang:checked ~ .buka {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.lambang {
display: none;
}

<div>
<input type="checkbox" id="UNIK-1" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-1" class="isi-judul">Judul 1</label>
<div class="isi-konten">
<p>Isi dari Judul 1</p>
</div>
</div>
<div>
<input type="checkbox" id="UNIK-2" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-2" class="isi-judul">Judul 2</label>
<div class="isi-konten">
<p>Isi dari Judul 2</p>
<p>Isi dari Judul 2.1</p>
<p>Isi dari Judul 2.2</p>
</div>
</div>
<div>
<input type="checkbox" id="UNIK-3" name="q" class="lambang">
<div class="buka">+</div>
<label for="UNIK-3" class="isi-judul">Judul 3</label>
<div class="isi-konten">
<p>Isi dari Judul 3</p>
</div>
</div>

Karena linknya hilang, maka demo harus buat...DEMO

Demikian 3 info seputar CSS pilihan, semoga bermanfaat :)

Ternyata saya menyimpan beberapa links source keren punya dengan tema yg sama. Dan tidak kalah keren dari yg sudah ada ;) Kelupaan lihat arsip :D

• codepen.io/Kseso/pen/Jwhxn
• experiments.wemakesites.net/animated-css3-only-horizontal-accordion.html
• andornagy.com/simple-jquery-accordion
• andornagy.com/pure-css-accordion
• codepen.io/andornagy/pen/KfjHh
• codepen.io/andornagy/pen/mrDCe
• codepen.io/pedronauck/pen/jaluz
• codepen.io/klamping/pen/mkArc
• codepen.io/diegopardo/pen/pvkjx
• codepen.io/r4c2r44/pen/bxrEj
• codepen.io/JustAnotherCoder/pen/rLGfg
• codepen.io/peternguyen/pen/yAsbw
• codepen.io/abergin/pen/ihlDf
• jsdo.it/duxca/xnml
• tympanus.net/codrops/2014/03/21/responsive-full-width-tabs

Happy coding \m/