「tabAccordion」　設置説明　java script

<!-- スタイル 部分 -->

<style type="text/css">
<!--
.tabtxt a{
color: #fff !important;
text-decoration: none;
}
.tabtxt a:hover{
color: #FF8000 !important;
}
p{
margin: 0;
padding: 5px;
line-height: 1.5em;
text-align: justify;

}
#wrapper{
width: 500px;
margin: 0 auto;
}
.box2{
background: #fff;
line-height: 18px !important;
}
.box2 img{
vertical-align:bottom !important;
}
.box2 ul{
padding: 20px 40px;
}
.box2 a{
color: #464646 !important;
text-decoration: none !important;
font-weight: bold !important;
}
.box2 a:hover{
color: #4f6cf4 !important;
font-weight: bold !important;
text-decoration: underline !important;
}
.boxholder{
clear: both;
padding: 5px;
background: #0A8DC7;
}
.tab{
float: left;
height: 32px;
width: 102px;
margin: 0 1px 0 0;
text-align: center;
background: #0A8DC7 url(http://example.com/wp-content/js/tabAccordion/images/greentab.jpg) no-repeat;
}
.tabtxt{
margin: 0;
color: #fff;
font-size: 12px;
font-weight: bold;
padding: 9px 0 0 0;
}
#post_entry ul {
margin: 0px;
}
-->
</style>



<!-- スクリプト 部分　１ -->

<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/prototype.lite.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.js"></script>
<script type="text/javascript" src="http://example.com/wp-content/js/tabAccordion/moo.fx.pack.js"></script>
<script type="text/javascript">
function init(){
var stretchers = document.getElementsByClassName('box2');
var toggles = document.getElementsByClassName('tab');
var myAccordion = new fx.Accordion(
toggles, stretchers, {opacity: false, height: true, duration: 600}
);
//hash functions
var found = false;
toggles.each(function(ul, i){
var div = Element.find(ul, 'nextSibling');
if (window.location.href.indexOf(ul.title) > 0) {
myAccordion.showThisHideOpen(div);
found = true;
}
});
if (!found) myAccordion.showThisHideOpen(stretchers[0]);
}
</script>



<!-- メイン 部分 -->

<div id="wrapper">
<div id="content">
<div class="tab">
<ul class="tabtxt" title="カテゴリー"><a href="javascript:;">カテゴリー</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="アーカイブ"><a href="javascript:;">アーカイブ</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="ページ"><a href="javascript:;">ページ</a></ul>
</div>
<div class="tab">
<ul class="tabtxt" title="最近の人気記事"><a href="javascript:;">最近の人気記事</a></ul>
</div>
<div class="boxholder">
<div class="box2">
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #E1F0FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #CEE7FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
<div class="box2" style="background: #A6D2FF !important";>
<p><ul>ここに表示させたい文章を記述</ul></p>
</div>
</div>
</div>
</div>



<!-- スクリプト 部分　２ -->
<!-- ここも忘れずに記述してください。　ここは、メイン部分（記事内本文）の下に記述します。 -->

<script type="text/javascript">
Element.cleanWhitespace('content');
init();
</script>