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

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

使用方法
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」サンプル

sponsors

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

記事作成:
記事URL:

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