01
10
accordian.pack.js - JavaScriptで動くアコーディオンスクリプト
2008-01-10<script type="text/javascript" src="/js/accordian.pack.js"></script>
【BODY部分解説】
<body onload="new Accordian('basic-accordian',5,'header_highlight');">
<div id="basic-accordian" >
<div id="test-header" class="accordion_headings header_highlight" >メニュー１</div>
<div id="test-content">
<div class="accordion_child">
メニュー１の内容
</div>
</div>
<div id="test1-header" class="accordion_headings" >メニュー２</div>
<div id="test1-content">
<div class="accordion_child">
メニュー２の内容
</div>
</div>
<div id="test2-header" class="accordion_headings" >メニュー３</div>
<div id="test2-content">
<div class="accordion_child">
メニュー３の内容
</div>
</div>
</div>
</body>
bodyタグを上記のように変更しないといけないので注意ください。
【スタイルシート解説】
#basic-accordian{
font-size: 12px;
padding:5px;
width:450px;
}
.accordion_headings{
padding:5px;
background:#99CC00;
color:#FFFFFF;
border:1px solid #FFF;
cursor:pointer;
font-weight:bold;
}
.accordion_headings:hover{
background:#00CCFF;
}
.accordion_child{
padding:15px;
background:#EEE;
}
.header_highlight{
background:#00CCFF;
}
で、実際設置してみましたのでサンプルをご覧ください。
レッツFC2ブログ アコーディオンタグ
アコーディオンタグでその他のスクリプトもどうぞ
アコーディオンタグでその他のスクリプトもどうぞ
