Example of JS implementation suitable for faq or menu sliding effect

The example in this article describes the implementation of JS that is suitable for faq or menu sliding effects. Sharing it with everyone for your reference, the details are as follows:

<!CTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt-->
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
<!--
body,div,ul,li,p,h1,h2{ margin:0; padding:0; border:0; background:#FAFAFA; font-family:Arial, Helvetica, sans-serif,"宋体"}
body{ text-align:center; font-size:12px}
li{ list-style:none}
.rolinList{ width:402px; height:auto; margin:20px auto 0 auto; text-align:left}
.rolinList li{margin-bottom:1px;border:1px solid #DADADA}
.rolinList li h2{ width:380px; height:40px; background:#fff; font-size:14px; line-height:40px; padding-left:20px; color:#333; cursor:pointer}
.content{ height:150px;width:400px; background:#fff; background:#FAFAFA}
.content p{ margin:12px}
-->
</style>
<script type="text/javascript">
//<![CDATA[
window.onload = function() {
rolinTab("rolin")
}
function rolinTab(obj) {
var list = $(obj).getElementsByTagName("LI");
var state = {show:false,hidden:false,showObj:false};
for (var i=0; i<list.length; i++) {
var tmp = new rolinItem(list[i],state);
if (i == 0) tmp.pShow();
}
}
function rolinItem(obj,state) {
var speed = 0.0666;
var range = 1;
var interval;
var tarH;
var tar = this;
var head = getFirstChild(obj);
var content = getNextChild(head);
var isOpen = false;
this.pHidden = function() {
if (isOpen) hidden();
}
this.pShow = show;
var baseH = content.offsetHeight;
content.style.display = "none";
var isOpen = false;
head.onmouseover = function() {
this.style.background = "#EFEFEF";
}
head.onmouseout = mouseout;
head.onclick = function() {
this.style.background = "#EFEFEF";
if (!state.show && !state.hidden) {
if (!isOpen) {
head.onmouseout = null;
show();
} else {
hidden();
}
}
}
function mouseout() {
this.style.background = "#FFF"
}
function show() {
head.style.borderBottom = "1px solid #DADADA";
state.show = true;
if (state.openObj && state.openObj != tar ) {
state.openObj.pHidden();
}
content.style.height = "0px";
content.style.display = "block";
content.style.overflow = "hidden";
state.openObj = tar;
tarH = baseH;
interval = setInterval(move,10);
}
function showS() {
isOpen = true;
state.show = false;
}
function hidden() {
state.hidden = true;
tarH = 0;
interval = setInterval(move,10);
}
function hiddenS() {
head.style.borderBottom = "none";
head.onmouseout = mouseout;
head.onmouseout();
content.style.display = "none";
isOpen = false;
state.hidden = false;
}
function move() {
var dist = (tarH - content.style.height.pxToNum())*speed;
if (Math.abs(dist) < 1) dist = dist > 0 ? 1: -1;
content.style.height = (content.style.height.pxToNum() + dist) + "px";
if (Math.abs(content.style.height.pxToNum() - tarH) <= range ) {
clearInterval(interval);
content.style.height = tarH + "px";
if (tarH != 0) {
showS()
} else {
hiddenS();
}
}
}
}
var $ = function($) {return document.getElementById($)};
String.prototype.pxToNum = function() {return Number(this.replace("px",""))}
function getFirstChild(obj) {
var result = obj.firstChild;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
function getNextChild(obj) {
var result = obj.nextSibling;
while (!result.tagName) {
result = result.nextSibling;
}
return result;
}
//]]>
</script>
<ul id="rolin">
  <li>
  <h2>PHP中文网 1</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://www.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
  <li>
  <h2>PHP中文网 2</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://www.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
  <li>
  <h2>PHP中文网3</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://wwww.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
  <li>
  <h2>PHP中文网4</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://www.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
  <li>
  <h2>PHP中文网 5</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://www.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
  <li>
  <h2>PHP中文网 6</h2>
  <div <p>PHP中文网--专业IT综合性网站<br /><br /><a target="_blank" href="http://www.php.cn/">http://www.php.cn/</a></p>
  </div>
  </li>
</ul>