accordionMulai dari yg sederhana sampai dengan tingkat full stylish style! AA Koben sekarang akan berbagi satu cara bagaimana cara membuat 3D accordion. You can look final result here codepen.io/Vampireos/full/DAfdr. Karena ini full-stylish banget, maka penggunaan kode CSS agak lumayan ;)) Selain efek 3D, bagian terakhir kotak konten pada accordion ini menggunakan trik stack of cards. Apakah itu, you can read here what is that codepen.io/Adevade/pen/ogyreb.
You lucky, i want make a screenshot...
Sobat bisa melihat bagian berputar, dan efek kotak bagian bawah terlihat seperti konten bertumpuk!Mengapa menggunakan accordion?
Coba pikirkan tentang accordion sebagai alat manajemen konten. Bila sobat memiliki halaman yang dipecah menjadi puluhan paragraf, link, gambar, atau banyak blok konten ... salah satu solusinya yaitu memasang accordion :)Pasangkan kode CSS pada tempat semestinya. Editlah code sesuai dengan keperluan (warna, background, lebar, tinggi dll)
<ul class="container anim-label-4 anim-art">
<li>
<input checked="checked" id="ac-1" name="ac-3D" type="radio"/><label for="ac-1" onclick="" title="Title Tampak Depan ">Title Tampak Belakang </label>
<article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
</li>
<li>
<input id="ac-2" name="ac-3D" type="radio"/><label for="ac-2" onclick="" title="Title Tampak Belakang ">Title Tampak Depan </label>
<article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
</li>
<li>
<input id="ac-3" name="ac-3D" type="radio"/><label for="ac-3" onclick="" title="Title Tampak Belakang ">Title Tampak Depan </label>
<article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
</li>
<li>
<input id="ac-4" name="ac-3D" type="radio"/><label for="ac-4" onclick="" title="Title Tampak Belakang ">Title Tampak Depan </label>
<article>
<p>----------- BLAH BLEH BLOH -----------</p>
</article>
</li>
<li>
<input id="ac-5" name="ac-3D" type="radio"/><label for="ac-5" onclick="" title="Title Tampak Belakang ">Title Tampak Depan </label>
<article>
<p>----------- BLAH BLEH BLOH -----------</p>
<p>----------- BLAH BLEH BLOH -----------</p>
<p><iframe frameborder="0" height="315" src="//www.youtube.com/embed/k3L7pwrE-tw" width="100%"></iframe></p>
</article>
</li>
</ul>Kalau sobat kepingin model lain, silahkan cari saja di Best Practices for Accordion Interfaces in Web Design webdesignledger.com/web-design-2/best-practices-accordions-in-web-designHappy accordion \m/
* View Source
* Generates copy/pastable markup from actual rendered markup.
*
* Copyright (c) 2012 Filament Group, Inc.
* Licensed under the MIT, GPL licenses.
*/
!function(e){var t="xrayhtml",n={text:{open:"View Source",close:"View Demo"},classes:{button:"btn btn-small",open:"view-source",sourcepanel:"source-panel"},initSelector:"[data-"+t+"]",defaultReveal:"inline"},a={_create:function(){return e(this).each(function(){var n=e(this).data("init."+t);return n?!1:void e(this).data("init."+t,!0)[t]("_init").trigger("create."+t)})},_init:function(){var a=e(this).data(t)||n.defaultReveal;"flip"===a&&e(this)[t]("_createButton"),e(this).addClass(t+" method-"+a)[t]("_createSource")},_createButton:function(){var t=document.createElement("a"),a=document.createTextNode(n.text.open),i=e(this);t.setAttribute("class",n.classes.button),t.href="#",t.appendChild(a),e(t).bind("click",function(e){var a=i.attr("class").indexOf(n.classes.open)>-1;i[a?"removeClass":"addClass"](n.classes.open),t.innerHTML=a?n.text.open:n.text.close,e.preventDefault()}).insertBefore(i)},_createSource:function(){var t=this,a=document.createElement("pre"),i=document.createElement("code"),c=document.createElement("div"),r=document.createElement("div"),s=t.innerHTML,o=document.createTextNode(s);c.setAttribute("class","snippet"),e(t).wrapInner(c),i.appendChild(o),a.appendChild(i),r.setAttribute("class",n.classes.sourcepanel),r.appendChild(a),this.appendChild(r)}};e.fn[t]=function(n,a,i,c){return this.each(function(){return n&&"string"==typeof n?e.fn[t].prototype[n].call(this,a,i,c):e(this).data(t+"data")?e(this):(e(this).data(t+"active",!0),void e.fn[t].prototype._create.call(this))})},e.extend(e.fn[t].prototype,a),e(function(){e(n.initSelector)[t]()})}(jQuery);