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

お手軽水平アコーディオンjavascript「haccordion」

｜ ｜ ｜ ｜ ｜ ｜ ｜

タブメニューやアコーディオンメニューではjavascriptを用いて作成することがあります。
haccordionは水平方向のアコーディオンメニューをお手軽に導入することができます。

haccordionからjquery.haccordion.jsを、jQueryからjquery.js（v1.2.1）をダウンロードします。
<script src="http://yourdomain/jquery.js" type="text/javascript"></script>
<script src="http://yourdomain/jquery.haccordion.js" type="text/javascript"></script>
<style type="text/css">
.haccordion .header, .haccordion .content{
float: left;
height: 250px;
}
.haccordion .header{
width: 20px;
background: #ccc;
color: #fff;
cursor: pointer;
}
.haccordion .content{
display: none;
width: 0px;
overflow: auto;
}
.haccordion .content p{
margin: 5px;
}
</style>
<script type="text/javascript">
$(function(){
$(".haccordion").haccordion();
});
</script>
あとはアコーディオンを以下のように作成すれば完成です。
<div class="haccordion">
<div class="header">タイトル</div>
<div class="content"><p>コンテンツ</p></div>
<!-- 上の2行の組み合わせを必要なだけ作成 -->
</div>
お手軽水平アコーディオンjavascript「haccordion」サンプル

記事作成：2007年11月29日

前の記事：フォームで複数ファイルを送信するjavascript「Multiple file upload」
次の記事：Dockメニューを上下に設置するjavascript「CSS Dock Menu」