お手軽水平アコーディオン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>
	<!-- 上の組み合わせを必要なだけ作成 -->
</div>

サンプル

*1

This is a sample of content for Content1 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

*2

This is a sample of content for Content2 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

*3

This is a sample of content for Content3 with a large text, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing, testing

Javascriptサンプルページ一覧
skuare.net