1.
Simple Flat UI CSS Accordion
Simple Flat UI CSS Accordion - Menerapkan efek animasi
unik baik menggunakan jquery ui, css3 maupun javascript
tentunya akan menambah keindahan setiap tampilan blog,
apalagi seperti trend design dengan gaya Flat UI. Sebagai
contoh kali ini adalah simple css accordion yang dibalut dengan
palet warna Flat UI color, seperti simple flat ui menu modal
dialog, dan simple menu ui efek flip css3.
 DEMO CODE
Untuk konsep pembentuknya adalah sebagai berikut :
CSS
@import
url(http://fonts.googleapis.com/css?family=Lato:400,700);
* {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

2.
box-sizing: border-box;
}
body {
font-family: 'Lato';
}
h1 {
font-size: 2em;
padding: 2em;
text-align: center;
}
.accordion dl {
}
.accordion dt > a {
text-align: center;
font-weight: 700;
padding: 2em;
display: block;
text-decoration: none;
color: #fff;
-webkit-transition: background-color 0.5s ease-in-out;
}
.accordion dd {

3.
background-color: #1abc9c;
color:#fafafa;
font-size: 1em;
line-height: 1.5em;
}
.accordion dd > p {
padding: 1em 2em 1em 2em;
}
.accordion {
position: relative;
background-color: #16a085;
}
.container {
max-width: 960px;
margin: 0 auto;
padding: 2em 0 2em 0;
}
.accordionTitle {
background-color: #22313F;
border-bottom: 1px solid #2c3e50;
}
.accordionTitle:before {
content: "+";

4.
font-size: 1.5em;
line-height: 0.5em;
float: left;
-moz-transition: -moz-transform 0.3s ease-in-out;
-o-transition: -o-transform 0.3s ease-in-out;
-webkit-transition: -webkit-transform 0.3s ease-in-out;
transition: transform 0.3s ease-in-out;
}
.accordionTitle:hover {
background-color: #2c3e50;
}
.accordionTitleActive {
background-color:#34495e;
}
.accordionTitleActive:before {
-webkit-transform: rotate(-225deg);
-moz-transform: rotate(-225deg);
transform: rotate(-225deg);
}
.accordionItem {
height: auto;
overflow: hidden;
}
@media all {

5.
.accordionItem {
max-height: 50em;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
-webkit-transition: max-height 1s;
transition: max-height 1s;
}
}
@media screen and (min-width: 48em) {
.accordionItem {
max-height: 15em;
-moz-transition: max-height 0.5s;
-o-transition: max-height 0.5s;
-webkit-transition: max-height 0.5s;
transition: max-height 0.5s;
}
}
.accordionItemCollapsed {
max-height: 0;
}
.animateIn {
-webkit-animation-name: accordionIn;
-webkit-animation-duration: 0.65s;
-webkit-animation-iteration-count: 1;

6.
-webkit-animation-direction: normal;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: normal;
-moz-animation-duration: 0.65s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionIn;
animation-duration: 0.65s;
animation-iteration-count: 1;
animation-direction: normal;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
.animateOut {
-webkit-animation-name: accordionOut;
-webkit-animation-duration: 0.75s;
-webkit-animation-iteration-count: 1;
-webkit-animation-direction: alternate;
-webkit-animation-timing-function: ease-in-out;

7.
-webkit-animation-fill-mode: both;
-webkit-animation-delay: 0s;
-moz-animation-name: accordionOut;
-moz-animation-duration: 0.75s;
-moz-animation-iteration-count: 1;
-moz-animation-direction: alternate;
-moz-animation-timing-function: ease-in-out;
-moz-animation-fill-mode: both;
-moz-animation-delay: 0s;
animation-name: accordionOut;
animation-duration: 0.75s;
animation-iteration-count: 1;
animation-direction: alternate;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
animation-delay: 0s;
}
@-webkit-keyframes accordionIn {
0% {
opacity: 0;
-webkit-transform: scale(0.8);
}
100% {
opacity: 1;
-webkit-transform: scale(1);

8.
}
}
@-moz-keyframes accordionIn {
0% {
opacity: 0;
-moz-transform: scale(0.8);
}
100% {
opacity: 1;
-moz-transform: scale(1);
}
}
@keyframes accordionIn {
0% {
opacity: 0;
transform: scale(0.8);
}
100% {
opacity: 1;
transform: scale(1);
}
}
@-webkit-keyframes accordionOut {
0% {
opacity: 1;
-webkit-transform: scale(1);

9.
}
100% {
opacity: 0;
-webkit-transform: scale(0.8);
}
}
@-moz-keyframes accordionOut {
0% {
opacity: 1;
-moz-transform: scale(1);
}
100% {
opacity: 0;
-moz-transform: scale(0.8);
}
}
@keyframes accordionOut {
0% {
opacity: 1;
transform: scale(1);
}
100% {
opacity: 0;
transform: scale(0.8);
}
}

10.
Javascript
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
/*!
* classie - class helper functions
* from bonzo https://github.com/ded/bonzo
*
* classie.has( elem, 'my-class' ) -> true/false
* classie.add( elem, 'my-new-class' )
* classie.remove( elem, 'my-unwanted-class' )
* classie.toggle( elem, 'my-class' )
*/
/*jshint browser: true, strict: true, undef: true */
/*global define: false */
( function( window ) {
'use strict';
function classReg( className ) {
return new RegExp("(^|s+)" + className + "(s+|$)");
}
var hasClass, addClass, removeClass;
if ( 'classList' in document.documentElement ) {
hasClass = function( elem, c ) {

11.
return elem.classList.contains( c );
};
addClass = function( elem, c ) {
elem.classList.add( c );
};
removeClass = function( elem, c ) {
elem.classList.remove( c );
};
}
else {
hasClass = function( elem, c ) {
return classReg( c ).test( elem.className );
};
addClass = function( elem, c ) {
if ( !hasClass( elem, c ) ) {
elem.className = elem.className + ' ' + c;
}
};
removeClass = function( elem, c ) {
elem.className = elem.className.replace( classReg( c ), ' '
);
};
}
function toggleClass( elem, c ) {
var fn = hasClass( elem, c ) ? removeClass : addClass;

12.
fn( elem, c );
}
var classie = {
hasClass: hasClass,
addClass: addClass,
removeClass: removeClass,
toggleClass: toggleClass,
has: hasClass,
add: addClass,
remove: removeClass,
toggle: toggleClass
};
if ( typeof define === 'function' && define.amd ) {
define( classie );
} else {
window.classie = classie;
}
})( window );
var $ = function(selector){
return document.querySelector(selector);
}
var accordion = $('.accordion');
accordion.addEventListener("click",function(e) {
e.stopPropagation();
e.preventDefault();
if(e.target && e.target.nodeName == "A") {

13.
var classes = e.target.className.split(" ");
if(classes) {
for(var x = 0; x < classes.length; x++) {
if(classes[x] == "accordionTitle") {
var title = e.target;
var content = e.target.parentNode.nextElementSibling;
classie.toggle(title, 'accordionTitleActive');
if(classie.has(content, 'accordionItemCollapsed')) {
if(classie.has(content, 'animateOut')){
classie.remove(content, 'animateOut');
}
classie.add(content, 'animateIn');
}else{
classie.remove(content, 'animateIn');
classie.add(content, 'animateOut');
}
classie.toggle(content, 'accordionItemCollapsed');
}
}
}
}
});
HTML
<div class="container">
<h1>Simple Flat UI CSS Accordion</h1>

14.
<div class="accordion">
<dl>
<dt><a class="accordionTitle" href="#">Test Simple
Flat UI CSS Accordion 1</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor
risus non bibendum. Maecenas sollicitudin eros in quam
imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut,
iaculis vel ipsum. Donec dignissim arcu nec elit faucibus
condimentum. Donec facilisis consectetur enim sit amet varius.
Pellentesque justo dui, sodales quis luctus a, iaculis eget
mauris. </p>
</dd>
<dt><a href="#" class="accordionTitle">Test Simple
Flat UI CSS Accordion 2</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor
risus non bibendum. Maecenas sollicitudin eros in quam
imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut,
iaculis vel ipsum. Donec dignissim arcu nec elit faucibus
condimentum. Donec facilisis consectetur enim sit amet varius.
Pellentesque justo dui, sodales quis luctus a, iaculis eget
mauris. </p>
</dd>

15.
<dt><a href="#" class="accordionTitle">Test Simple
Flat UI CSS Accordion 3</a></dt>
<dd class="accordionItem accordionItemCollapsed">
<p>Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Morbi eu interdum diam. Donec interdum porttitor
risus non bibendum. Maecenas sollicitudin eros in quam
imperdiet placerat. Cras justo purus, rhoncus nec lobortis ut,
iaculis vel ipsum. Donec dignissim arcu nec elit faucibus
condimentum. Donec facilisis consectetur enim sit amet varius.
Pellentesque justo dui, sodales quis luctus a, iaculis eget
mauris. </p>
</dd>
</dl>
</div>
</div>
Konsep diatas hanyalah contoh saja untuk pengembangan
silakan anda kreasikan sendiri sesuai kebutuhan.