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

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

sponsors

使用方法

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属性を変更する必要があります。

sponsors

サンプル

Home
About Us
Download
Link
どうでもいいけど本家サイトのアコーディオンのスペルが違う。
jsファイルまで間違えているのにCSSでの記述は正解。。。
正解:Accordion
本家:Accordian
スペルミスはともかく、利用においてはいいものが。
特にjavascriptライブラリを使用していないのはいい。
何かに依存すると変更が面倒になるから。