アコーディオン形式で内容を表示する

書式

new Rico.Accordion( element, option )

element : ページ上のエレメント
option : オプション

説明

　アコーディオン形式で内容を表示するにはRico.Accordion()を使います。パラメータには処理する内容全てを囲むタグを指定します。divタグの構成は以下のようになります。

<div> ←全体を示すdivタグ
<div> ←パネルを示すdivタグ
<div>パネルタイトル</div> ←パネルのタイトルを示すdivタグ
<div>パネル内容</div> ←パネルの内容を示すdivタグ
</div>
<div>

また、オプションは以下のものが指定できます。
【指定できるオプションと初期値】
expandedBg#63699c拡張された時の背景色
hoverBg#63699c重なった時の背景色
collapsedBg#6b79a5縮小したときの背景色
expandedTextColor#ffffff拡張された時の文字の色
expandedFontWeightbold拡張された時の文字の太さ
collapsedTextColor#ced7ef文字の色
collapsedFontWeightnormal文字の太さ
hoverTextColor#ffffffマウスが重なった時の色
borderColor#1f669b枠の色
panelHeight200パネルの縦幅
onHideTabnullタブが隠された時の処理
onShowTabnull一番最初にタブが表示された時の処理
onLoadShowTab0最初に表示するタブの番号（0〜）

Ajaxライブラリ リファレンス

サンプルコード [実行]

<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
<title>Sample</title>
<link rel="stylesheet" href="main.css" type="text/css" media="all">
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="rico.js"></script>
<script type="text/javascript"><!--
window.onload = function (){
new Rico.Accordion( $("Accordion1"), { panelHeight:100, onLoadShowTab:1, onShowTab:openMsg() } );
}
function openMsg(){ alert("表示されました");}
// --></script>
</head>
<body>
<h1>アコーディオン</h1>
<div id="Accordion1" class="Accordion">
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル1</div>
<div class="AccordionPanelContent">
内容、その１
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル2</div>
<div class="AccordionPanelContent">
内容、その２
</div>
</div>
<div class="AccordionPanel">
<div class="AccordionPanelTab">パネル3</div>
<div class="AccordionPanelContent">
内容、その３
</div>
</div>
</div>
</body>
</html>