お手軽水平アコーディオン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年10月27日 14:54
