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

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

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」サンプル

sponsors

「お手軽水平アコーディオンjavascript「haccordion」」をシェアする

記事作成:
記事URL:

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