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

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

使用方法

Accordion v1.0からファイルをダウンロード・解凍すると出来るaccordionフォルダのjavascriptを3種類全てhead内に埋め込みます。
accordion.js以外はscript.aculo.usに含まれますので、必要に応じてアップロードしてください。
さらにアコーディオンを作成する際最低限必要なjavascriptやCSS、HTMLを以下の通り書きます。

javascript

script

<script type="text/javascript">
Event.observe(window, 'load', loadAccordions, false);

function loadAccordions() {
var bottomAccordion = new accordion('#対象となるid名');
}

HTML

HTML

HTMLではclass属性にaccordion_toggleに常に表示されるタイトルを、accordion_contentにはタイトル部分をクリックすると表示される内容分を書きます。
例)
<h1 class="accordion_toggle">タイトル</h1>
<div class="accordion_content">内容</div>
このclassの名称はjavascriptを変更することで改変できます。

CSS

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、CSS、HTMLぞれぞれに工夫が必要です。

javascript

javascript

function loadAccordions() {
var topAccordion = new accordion('#水平アコーディオン対象id名', {
classNames : {
toggle : 'horizon',
toggleActive : 'horizon_active',
content : 'horizontal_accordion_content'
},
defaultSize : {
width : 400 //デフォルトの幅
},
direction : 'horizontal'
});

CSS

CSS

.horizon {
float: left;
display: block;
height: 100px;
width: 30px;
background: #DCDCDC;
color: #ffffff;
text-decoration: none;
outline: none;
border-right: 1px solid #C8C8C8;
cursor: pointer;
margin: 0;
}

.horizon_active {
background: #000000;
}

.horizontal_accordion_content {
height: 100px;
float: left;
overflow: hidden;
background-color: #ffffff;
}

HTML

HTML

<h1 class="horizon">タイトル</h1>
<div class="horizontal_accordion_content">内容</div>

オプション

script内部に以下のように記入することで、常に開いておくアコーディオンを指定できます。
bottomAccordion.activate($$('#horizon .accordion_toggle')[開けておきたいアコーディオン]); //垂直用
topAccordion.activate($$('#vertical .horizon')[開けておきたいアコーディオン]); //水平用

なお、1枚目を常に表示したい場合は[0]を指定。同様に2枚目は[1]などとする。
accorion.jsファイルの変更によるデフォルト設定
アコーディオンスピード:34行目:resizeSpeed : 8
class属性の名称:
36行目:toggle : 'タイトル'
37行目:toggleActive : '選択時のタイトル',
38行目:content : 'アコーディオン内部'
アコーディオン方向:44行目:direction : 'vertical'(垂直)水平はhorizontal

sponsors

Javascriptサンプルページ一覧
skuare.net