軽量・簡単導入のアコーディオンjavascript「Simple Accordions」 : skuare.net

軽量・簡単導入のアコーディオンjavascript「Simple Accordions」

2007

08/10

昨今、開閉するアコーディオンメニューの採用は当たり前の状況になっています。
そんな中、軽量かつ簡単に導入できるものは、あまり多くありませんでした。
Deziner FolioのSimple Javascript Accordionsはその名の通り、軽く簡単に導入でき、フレームワークを必要としないjavascriptです。

使用方法
Simple Javascript Accordionsからaccordian.pack.jsをダウンロードし、head内に置きます。
あとはHTMLに以下の記述をすれば完成です。
なおspeedは数字が少ない方が早くなります。
ソース記述例（サンプルのような表示）
<body onload="new Accordian('アコーディオン全体を包むid名',speed,'最初に表示するクラス名');"> <div id="demo"> <div style="width:125px; float:left"> <div id="○○-header" class="accordion_headings 最初に表示するクラス名">タイトル1</div> <div id="△△-header" class="accordion_headings">タイトル2</div> <div id="□□-header" class="accordion_headings">タイトル3</div> </div> <div style="float:left; width:370px;"> <div id="○○-content"> <div class="accordion_child"> テキスト1 </div> </div> <div id="△△-content"> <div class="accordion_child"> テキスト2 </div> </div> <div id="□□-content"> <div class="accordion_child"> テキスト3 </div> </div> </div>
本家サイトにあるようなタブ形式などでは、HTMLのstyle属性を変更する必要があります。
軽量・簡単導入のアコーディオンjavascript「Simple Accordions」サンプル