お手軽水平アコーディオンjavascript「haccordion」
2007
11/29
タブメニューやアコーディオンメニューでは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」サンプル
｜
｜
｜
｜
｜
｜
前の記事：フォームで複数ファイルを送信するjavascript「Multiple file upload」
次の記事：Dockメニューを上下に設置するjavascript「CSS Dock Menu」
コメント投稿
お手軽水平アコーディオンjavascript「haccordion」に関するコメントはまだありません。
ご遠慮なくコメントしてください。
この記事へのトラックバック:
トラックバック一覧
![[prototype]Protoload](http://www.skuare.net/test/prototype/protoload.gif)
