實際執行畫面

極為精簡摺疊選單套件，僅僅使用到 Mootools 框架本身並沒有多出很多的 JavaScript 的程式碼，如果沒有需要用到很多功能的使用者可以使用這一個套件，基本的折疊顏色的更換都是很完美的表現出來。

使用方法：
首先先載入 MooTools 框架
//使用Google AJAX API 讀取 MooTools 1.4.5 包含 YUI 的壓縮版本
<script src="//ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js"></script>
再來是CSS的部分
<style>
.accToggler{
    margin: 3px auto;
    padding: 3px;
    width: 400px;
    background: #acc95f;
    color: #f4f4f4;
    border: 1px solid #fff;
    cursor: pointer;
}/*選單標題的CSS語法*/
.accContent{
    margin: 0px auto;
    width: 400px;
}/*選單內容的CSS語法*/
</style>

然後輸入內文要顯示摺疊選單的部分
<p class="accToggler">標題一</p>
<p class="accContent">內容一</p>
<p class="accToggler">標題二</p>
<p class="accContent">內容二</p>
<p class="accToggler">標題三</p>
<p class="accContent">內容三</p>
<p class="accToggler">標題四</p>
<p class="accContent">內容四</p>
<p class="accToggler">標題五</p>
<p class="accContent">內容五</p>

最後再寫JavaScript的部分就完成了
<script language="javascript">
var accordion;
var accordionTogglers;
var accordionContents;
window.onload = function() {
  accordionTogglers = document.getElementsByClassName('accToggler');
  accordionTogglers.each(function(toggler){
 //記住原本的顏色
 toggler.origColor = toggler.getStyle('background-color');
 //設定為新的顏色
 toggler.fx = new Fx.Color(toggler, 'background-color');
  });
  //內容的Class名稱
  accordionContents = document.getElementsByClassName('accContent');

  accordion = new Fx.Accordion(accordionTogglers,
  accordionContents,{
//當開啟的時候顏色變成 #6899CE
onActive: function(toggler){
 toggler.fx.toColor('#6899CE');
},
//關閉的那個選單回到原來的顏色
onBackground: function(toggler){
 toggler.setStyle('background-color', toggler.origColor);
}
  });
}
</script>

作者網站：http://www.solutoire.com/experiments/mootools/acc_ex3.html
檔案大小：94.1 KB
檔案下載：http://ajax.googleapis.com/ajax/libs/mootools/1.4.5/mootools-yui-compressed.js