◎見出し項目のみを表示して、その内容を折りたたむことにより、ページの全体を一覧できる。
テキスト文の多いページの場合、限られた領域に多くのテキストを格納できる。
文章を各項目見出しに分割することで要点ごとにまとめて読み易くできる。
あるいは
◎分類された、数多くのコンテンツや、リンク先メニューの切替えに便利である。
コンテンツがパネル幅（初期設定300px）を越えると、スクロールで下まで閲覧はできるが編集はできなくなる。
一時的にパネル幅を広く設定すると編集できる。 これがこの方式の最大の欠点である。
このページは専用の SpryAccordion.css を使用しているので自由に変更してもよい。 他のページに影響しない。
（編集を容易にするためにこのページはパネルを拡大設定する時がある。）
その場合は、このパネルを下にスクロールすると、次のメニューが表示される。
*** 構造の例 *********************
<body>
<div id="otenkiAccordion"> ・・・・・これは 冒頭の id 宣言
<div class="AccordionPanel">
<div class="AccordionPanelTab">タブ名 1</div>
<div class="AccordionPanelContent">
本日は晴天なり<br />
</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 class="AccordionPanel">
<div class="AccordionPanelTab">タブ名 4</div>
<div class="AccordionPanelContent">
４日目も晴天なり
</div>
</div>
</div> ・・・・・ 冒頭id の閉じ
最後に、また別のJavaScript が挿入される。
</body>
****************************************
◎コピーなどでコンテンツ 入力パネル幅(height)を超えて記入すると、以後直接記入できなくなる。
その場合は、右Window の「CSSスタイル」で AccordingPanelContent の height値（初期設定300px）を記入幅より大きく設定すると記入できる。
右Window に「CSSスタイル」が表示されない時は、下の
「プロパティ」にある「CSS」をクリックすると表示される。
★注意：AccordionPanelContent の height値を変更すると、SpryAccordion.css ファイルが一時的に変更されるので、これを保存してはならない。（編集画面の上部タブに SpryAccordion.css* の表示がでるのでこれを保存してはならない）。 保存すると、変更が決定してしまう。
◎height の他、margin、padding、背景色 なども、右Window のCSSスタイルで設定できる。
この場合、SpryAccordion.css が変更されるので、保存の際にこのファイルも保存する。（「全てを保存」でも可）。
このCSSファイルを修正すると これを使用している他のアコーディオンメニューにも適用されるから注意。
◎多くの marginやpadding の設定箇所があるが、どれも変えないほうが良い。 不適切な部分に隙間があく。
◎アコーデイオンの横幅の変更は表内に入れることで調整するのが良い。CSS ファイルを変更しないので他のメニューに影響しない。
◎動作がオカシイ時は、コードチェックして、上記の基本構造になるように修正する。
★Accordion (SpryAccordion.css)の色設定
ルールの表記
・Open → メニューを開けた時の色
・Tab/Panel → タブ色、パネル内背景色
・Hover → MouseON色
・Focused → 通常時の色。 起動時の色は Focused の文字なし。
・Content → コンテンツに関する設定
・項目内で、background-color → 背景色。 color → 文字色
Accordion では、MouseONでタブ色を変えることはできないようだ。
具体的には、
◎起動時 未Openのタブ背景色（初期設定：薄灰色）
AccordionPanelTab {
background-color: #CCCCCC;}
◎起動時 Open済みのタブ背景色（初期設定：極薄灰色）
AccordionPanelOpen .AccordionPanelTab { background-color: #EEEEEE（見えないので薄灰色で表示）; }
下２つの文字色は、編集で文字色を指定した場合は反映されない。
△未OpenのマウスON タブ文字色（初期設定：濃灰色）
. AccordionPanelTabHover { color: #555555; }
△Open済みのマウスON タブ文字色 （初期設定：濃灰色）
. AccordionPanelOpen .AccordionPanelTabHover { color: #555555; }
.
◎未Openのタブ背景色（初期設定：濃青色）
AccordionFocused .AccordionPanelTab { background-color: #3399FF; }
◎Open済みのタブ背景色（初期設定：薄青色）
. AccordionFocused .AccordionPanelOpen .AccordionPanelTab { background-color: #33CCFF; }
★行間などのCSS設定
例えば、本文の行間を140％にしたい場合は、
冒頭のセレクター記述に、下記を入れる。（このページはこの記述あり）
◎・AccordionPanelContent {
line-height: 140%;
}