allenfantasy/accordion.css

## accordion.css
#box {
  width: 300px;
  background-color: #f8f8f8;
  padding: 10px;
}
.details {
  height: 0px;
  overflow: hidden;
}
.close {

}

.open {
  height: 200px;
  animation-name: close;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: alternate;
  -webkit-animation-name: open;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
}
.close {
  height: 100px;
  animation-name: close;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-direction: alternate;
  -webkit-animation-name: close;
  -webkit-animation-duration: 1s;
  -webkit-animation-timing-function: linear;
  -webkit-animation-direction: alternate;
}

@keyframes open
{
  from { height: 100px; }
  to { height: 200px; }
}
@-webkit-keyframes open
{
  from { height: 100px; }
  to { height: 200px; }
}

@keyframes close
{
  from { height: 200px; }
  to { height: 100px; }
}
@-webkit-keyframes close
{
  from { height: 200px; }
  to { height: 100px; }
}

## accordion.html
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div id="box">
    <div class="thumbnail idle">
      dxhaxk ,
      利嘉豪WireDancer
    </div>

    <div class="details idle">
      <div>嘎嘎嘎干活 利嘉豪WireDancer</div>
      <div>开会过过瘾 利嘉豪WireDancer</div>
      <div class="clearfix"></div>
    </div><!-- hide details -->
  </div>
</body>
</html>

## accordion.js
function bindEvent(element, type, handler) {
  if (element.addEventListener) {
    element.addEventListener(type, handler, false);
  }
  else { // lte IE 8
    element.attachEvent('on'+type, handler);
  }
  //alert('omg');
}
var open = function() {
  this.className = this.className.replace('idle', 'open');
  this.className = this.className.replace('close', 'open');
};
var close = function() {
  this.className = this.className.replace('open','close');
};

window.onload = function() {

  var toggle = function() {
    var classAttr = this.getAttribute("class");
    if (classAttr == 'idle' || classAttr == 'close') {
      this.setAttribute("class", "open");
    }
    else if (classAttr == 'open') {
      this.setAttribute("class", "close");
    }
  };
  var box = document.getElementById('box');
  bindEvent(box, "click", toggle);
};
	#box {
	width: 300px;
	background-color: #f8f8f8;
	padding: 10px;
	}
	.details {
	height: 0px;
	overflow: hidden;
	}
	.close {

	}

	.open {
	height: 200px;
	animation-name: close;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-direction: alternate;
	-webkit-animation-name: open;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	}
	.close {
	height: 100px;
	animation-name: close;
	animation-duration: 1s;
	animation-timing-function: linear;
	animation-direction: alternate;
	-webkit-animation-name: close;
	-webkit-animation-duration: 1s;
	-webkit-animation-timing-function: linear;
	-webkit-animation-direction: alternate;
	}

	@keyframes open
	{
	from { height: 100px; }
	to { height: 200px; }
	}
	@-webkit-keyframes open
	{
	from { height: 100px; }
	to { height: 200px; }
	}

	@keyframes close
	{
	from { height: 200px; }
	to { height: 100px; }
	}
	@-webkit-keyframes close
	{
	from { height: 200px; }
	to { height: 100px; }
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset=utf-8 />
	<title>JS Bin</title>
	</head>
	<body>
	<div id="box">
	<div class="thumbnail idle">
	dxhaxk ,
	利嘉豪WireDancer
	</div>

	<div class="details idle">
	<div>嘎嘎嘎干活利嘉豪WireDancer</div>
	<div>开会过过瘾利嘉豪WireDancer</div>
	<div class="clearfix"></div>
	</div><!-- hide details -->
	</div>
	</body>
	</html>
	function bindEvent(element, type, handler) {
	if (element.addEventListener) {
	element.addEventListener(type, handler, false);
	}
	else { // lte IE 8
	element.attachEvent('on'+type, handler);
	}
	//alert('omg');
	}
	var open = function() {
	this.className = this.className.replace('idle', 'open');
	this.className = this.className.replace('close', 'open');
	};
	var close = function() {
	this.className = this.className.replace('open','close');
	};

	window.onload = function() {

	var toggle = function() {
	var classAttr = this.getAttribute("class");
	if (classAttr == 'idle' \|\| classAttr == 'close') {
	this.setAttribute("class", "open");
	}
	else if (classAttr == 'open') {
	this.setAttribute("class", "close");
	}
	};
	var box = document.getElementById('box');
	bindEvent(box, "click", toggle);
	};