Pure CSS Accordion, Show-Hide or Toggle for You - Hallo friend Cara Mudah Posting Gratisan, In the article you read this time with the title Pure CSS Accordion, Show-Hide or Toggle for You, we have prepared well for this article you read and download the information therein. hopefully fill posts Article Coded, Article CSS, Article CSS3, Article HTML, Article Tutorial, we write this you can understand. Well, happy reading.

Title : Pure CSS Accordion, Show-Hide or Toggle for You
link : Pure CSS Accordion, Show-Hide or Toggle for You

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/

Thus articles Pure CSS Accordion, Show-Hide or Toggle for You

that is all articles Pure CSS Accordion, Show-Hide or Toggle for You This time, hopefully can provide benefits to all of you. Okay, see you in another article posting.

You now read the article Pure CSS Accordion, Show-Hide or Toggle for You with the link address https://autopostingblogspot.blogspot.com/2014/08/pure-css-accordion-show-hide-or-toggle.html