skuare.netはJavaScriptライブラリのjQuery,mootools,prototypeのプラグインを中心にWebサイト構築に関する技術を試す個人サイトです

水平方向もOKのアコーディオンjavascript「Accordion v1.0」

｜ ｜ ｜ ｜ ｜ ｜ ｜

多くのコンテンツをページに包含させたい時、アコーディオンメニューを使用することがあります。
各javascriptライブラリでもアコーディオンを実装していますが、その多くが垂直方向であり、水平方向を実現しているのはありませんでした。
stickman labsが公開しているAccordion v1.0では、水平方向も可能にしたアコーディオンを作成することができます。

使用方法
Accordion v1.0からファイルをダウンロード・解凍すると出来るaccordionフォルダのjavascriptを3種類全てhead内に埋め込みます。
さらにjavascriptやCSS、HTMLを以下の通り書きます（垂直バージョンの場合）。
【javascript】
<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);
function loadAccordions() {
var Accordion = new accordion('#対象となるid名');
}
<script>
【HTML】
class属性にaccordion_toggleに常に表示されるタイトルを、accordion_contentにはタイトル部分をクリックすると表示される内容分を書きます。
例）
<h1 class="accordion_toggle">タイトル</h1>
<div class="accordion_content">内容</div>
【CSS】
.accordion_toggle {
display: block;
height: 30px;
background: #DCDCDC;
padding: 0 10px 0 10px;
line-height: 30px;
color: #ffffff;
border-bottom: 1px solid #C8C8C8;
font-weight: normal;
text-decoration: none;
outline: none;
font-size: 12px;
color: #000000;
cursor: pointer;
margin: 0;
}
.accordion_toggle_active {
background: #000000;
color: #ffffff;
}
.accordion_content {
background-color: #ffffff;
overflow: hidden;
}
なお水平アコーディオンを作成する場合は基本的にはjavascriptにdirection : 'horizontal'を、タイトル部分のCSSにfloatなどを書き込むだけです。
詳細は水平方向もOKのアコーディオンjavascript「Accordion v1.0」をご覧下さい。

記事作成：2007年07月18日

前の記事：「iPhone」風UIを実現するJavascript「iUI.js」
次の記事：Movable Typeで使用している画像を表示するプラグイン「EntryImages」