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

昨今、開閉するアコーディオンメニューの採用は当たり前の状況になっています。
そんな中、軽量かつ簡単に導入できるものは、あまり多くありませんでした。
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属性を変更する必要があります。

サンプル

Home

About Us

Download

Link

どうでもいいけど本家サイトのアコーディオンのスペルが違う。
jsファイルまで間違えているのにCSSでの記述は正解。。。
正解：Accordion
本家：Accordian

スペルミスはともかく、利用においてはいいものが。
特にjavascriptライブラリを使用していないのはいい。
何かに依存すると変更が面倒になるから。

Download:accordian.pack.js

Link:
javascriptサンプル一覧
skuare.net