使用方法

Accordion v1.0からファイルをダウンロード・解凍すると出来るaccordionフォルダのjavascriptを3種類全てhead内に埋め込みます。
accordion.js以外はscript.aculo.usに含まれますので、必要に応じてアップロードしてください。
さらにアコーディオンを作成する際最低限必要なjavascriptやCSS、HTMLを以下の通り書きます。

javascript

script

<script type="text/javascript">

		Event.observe(window, 'load', loadAccordions, false);

	

		function loadAccordions() {

			var bottomAccordion = new accordion('#対象となるid名');

		}

HTML

HTMLではclass属性にaccordion_toggleに常に表示されるタイトルを、accordion_contentにはタイトル部分をクリックすると表示される内容分を書きます。
例）
<h1 class="accordion_toggle">タイトル</h1>
<div class="accordion_content">内容</div>
このclassの名称はjavascriptを変更することで改変できます。

CSS


.accordion_toggle {

display: block;

height: 30px;

background: #DCDCDC;

padding: 0 10px 0 10px;

line-height: 30px;

color: #ffffff;

border-bottom: 1px solid #C8C8C8;

font-weight: normal;

text-decoration: none;

outline: none;

font-size: 12px;

color: #000000;

cursor: pointer;

margin: 0;

}



.accordion_toggle_active {

background: #000000;

color: #ffffff;

}



.accordion_content {

background-color: #ffffff;

overflow: hidden;

}

水平アコーディオン

水平アコーディオンを作成する際はjavascript、CSS、HTMLぞれぞれに工夫が必要です。

javascript

function loadAccordions() {

var topAccordion = new accordion('#水平アコーディオン対象id名', {

classNames : {

toggle : 'horizon',

toggleActive : 'horizon_active',

content : 'horizontal_accordion_content'

},

defaultSize : {

width : 400  //デフォルトの幅

},

direction : 'horizontal'

});

CSS

.horizon {

			float: left;

			display: block;

			height: 100px;

			width: 30px;

			background: #DCDCDC;

			color: #ffffff;

			text-decoration: none;

			outline: none;

			border-right: 1px solid #C8C8C8;

			cursor: pointer;

			margin: 0;

		}

		

		.horizon_active {

			background: #000000;

		}

		

		.horizontal_accordion_content {

			height: 100px;

			float: left;

			overflow: hidden;

			background-color: #ffffff;

		}

HTML

オプション

script内部に以下のように記入することで、常に開いておくアコーディオンを指定できます。

bottomAccordion.activate($$('#horizon .accordion_toggle')[開けておきたいアコーディオン]);   //垂直用

topAccordion.activate($$('#vertical .horizon')[開けておきたいアコーディオン]);   //水平用

なお、1枚目を常に表示したい場合は[0]を指定。同様に2枚目は[1]などとする。
accorion.jsファイルの変更によるデフォルト設定
アコーディオンスピード：34行目：resizeSpeed : 8
class属性の名称：
36行目：toggle : 'タイトル'
37行目：toggleActive : '選択時のタイトル',
38行目：content : 'アコーディオン内部'
アコーディオン方向：44行目：direction : 'vertical'（垂直）水平はhorizontal

水平方向もOKのアコーディオンjavascript「Accordion v1.0」

使用方法

javascript

HTML

CSS

水平アコーディオン

javascript

CSS

HTML

オプション