このサンプルは、jQuery UIのaccordion()プラグインを使用してアコーディオンを表示します。見出し「Section1-4」をクリックするとコンテンツが展開します。少なくとも１個のコンテンツが常時表示されます。アコーディオンの高さは自動的に調整されます。また、幅はカスタマイズできます。
accordion()の引数「header」には、見出しを宣言したhtml要素名を指定します。デフォルトはanchor(a)要素です。ここでは、h3要素で見出しを宣言していますので「h3」を指定します。
$('#accordion').accordion({ header: 'h3' });
accordionの幅を調整するには、div.demoのwidthを設定します。
div.demo { width:400px; }