質問: アコーディオンを使ったウェブページをつくっておりまして、そのアコーディオン自体は正常に動いております。(動作は問題ないです) アコーディオンは5つありまして、その一つ一つにそれぞれのコンテンツをいれたサイトを作りたいのですが、たとえばAのコンテンツを開くと縦幅が長すぎて、下のほうに空欄が出てしまいます。(B,C、D、Eも同様です)。 JavaScript で CSS の命令文を書き込まなければいけないんだろうなぁ・・・って言うのはうすうすわかっているつもりですが、いかんせん、いかに書くのかがわかりません。 ↓こんな感じで。 ``` ``` 以下は、現状僕が作っているサイトの header と body の一部です。 教えてください。よろしくお願いいたします。 ``` Aボタン Aのコンテンツがいろいろ入っています。 画像もあれこれ 100pxもあれば十分です。 Bボタン Cボタン Cのコンテンツは決まっていません Dボタン Dのコンテンツもまだです。 Eボタン 製作中です。しばらくお待ちください。 ```
回答: デフォルトではそれぞれのコンテンツの高さは最も高い要素の高さに合わせられます。 `heightStyle: "content"`を指定してください。 ``` $(function() { $( "#accordion" ).accordion({collapsible: true, heightStyle: "content" }); }); ``` Accordion - No auto height | jQuery UI そのあと各要素の高さを指定すれば良いです。`height()`を使ってください。 ``` $("#a-contents").height(100); $("#b-contents").height(300); ``` 単位を指定しなければデフォルトでpx指定となります。