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

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

使用方法
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」をご覧下さい。

sponsors

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

記事作成:
記事URL:

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