這一個套件主要由Mootools 框架為基礎來組成，可以讓小小的空間中放得下更多的內容。




使用方法：

先引用框架的JS檔案
<script src="scripts/prototype.lite.js" type="text/javascript"></script>
<script src="scripts/moo.fx.js" type="text/javascript"></script>
<script src="scripts/moo.fx.pack.js" type="text/javascript"></script>

然後是CSS的部分
<style type="text/css">
body{
  color: #333;
  font-size: 11px;
  font-family: verdana;
}
a{
  color: #fff;
  text-decoration: none;
}
a:hover{
  color: #DFE44F;
}
p{
  margin: 0;
  padding: 5px;
  line-height: 1.5em;
  text-align: justify;
  border: 1px solid #73A405;
}
#wrapper{ /*這是控制摺疊選單的大小寬度*/
  width: 500px;
  margin: 0 auto;
}
.box{ /*每一則背景的顏色*/
  background: #fff;
}
.boxholder{
  clear: both;
  padding: 5px;
  background: #8DC70A;
}
.tab{  /*選單控制的按鈕背景圖片*/
  float: left;
  height: 32px;
  width: 102px;
  margin: 0 1px 0 0;
  text-align: center;
  background: #8DC70A url(images/greentab.jpg) no-repeat;
}
.tabtxt{  /*選單控制的文字*/
  margin: 0;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 9px 0 0 0;
}
</style>
<div id="wrapper">
<div id="content">
<h3 class="tab" title="first"><div class="tabtxt"><a href="#">first</a></div></h3>
<div class="tab"><h3 class="tabtxt" title="second"><a href="#">second</a></h3></div>
<div class="tab"><h3 class="tabtxt" title="third"><a href="#">third</a></h3></div>
<div class="tab"><h3 class="tabtxt" title="fourth"><a href="#">fourth</a></h3></div>
<div class="boxholder">
<div class="box">
<p>第一部分內容</p>
</div>
<div class="box">
<p>第二部分內容</p>
</div>
<div class="box">
<p>第三部分內容</p>
</div>
<div class="box">
<p>第四部分內容</p>
</div>
</div>
</div>
</div>


最後只要再加入Javascripts的程式執行部分就完成了

<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
); //這裡的600是滑動到結束的時間單位是毫秒 就是0.6秒的時間
//hash functions
var found = false;
toggles.each(function(h3, i){
var div = Element.find(h3, 'nextSibling');
if (window.location.href.indexOf(h3.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
Element.cleanWhitespace('content');
init(); //啟動程式
</script>

作者網站：http://www.nyokiglitter.com/
檔案大小：10.2 KB
檔案下載：http://www.nyokiglitter.com/file_download/3
檔案備份：下載