5026


アコーディオンを使ったウェブページをつくっておりまして、そのアコーディオン自体は正常に動いております。（動作は問題ないです）

アコーディオンは５つありまして、その一つ一つにそれぞれのコンテンツをいれたサイトを作りたいのですが、たとえばAのコンテンツを開くと縦幅が長すぎて、下のほうに空欄が出てしまいます。（B,C、D、Eも同様です）。

JavaScript で CSS
の命令文を書き込まなければいけないんだろうなぁ・・・って言うのはうすうすわかっているつもりですが、いかんせん、いかに書くのかがわかりません。  
↓こんな感じで。

[code]

    <script>
    ？？？？？？？？？？？
    </script>
    
[/code]

以下は、現状僕が作っているサイトの header と body の一部です。

教えてください。よろしくお願いいたします。

[code]

    <script>
      $(function() {
        $( "#accordion" ).accordion({ collapsible: true
        });
      });
      </script>
    
    
    <body>
     <div id="accordion">
    
                  <div id="A_btn">Aボタン</div>
                  <div id="a-contents">
                      Aのコンテンツがいろいろ入っています。
    　　　　　　　　　　画像もあれこれ
    　　　　　　　　　　１００pxもあれば十分です。
                  </div>
    
    
                   <div id="B_btn">Bボタン</div>
    
                    <div id="b-contents>
                        Bのコンテンツがいっぱい入っています。
       　　　　　　　　　このコンテンツは縦幅が長く、300pxはほしいです。  
                     </div>
    
    
                     <div id="c_btn">Cボタン</div>
                              <div id="C-contents">
                                Cのコンテンツは決まっていません
    
                              </div>
    
    
                          <div id="D_btn">Dボタン</div> 
                              <div id="d-contents">
                             Dのコンテンツもまだです。
                              </div>
    
                           <div id="E_btn">Eボタン</div>
                              <div id="e-contents">
                              <p>製作中です。しばらくお待ちください。</p>
                              </div>
    
    
           </div><!--end accordion-->
    
[/code]


CC BY-SA 3.0
2015-01-22T02:10:12.460
5025
2015-01-22T03:40:12.723
2015-01-22T03:30:38.103
4978
7647
question
javascript css jquery jquery-ui
jQuery のアコーディオンに、それぞれのコンテンツ縦幅を設定したいです


デフォルトではそれぞれのコンテンツの高さは最も高い要素の高さに合わせられます。  
`heightStyle: "content"`を指定してください。

[code]

    $(function() {
        $( "#accordion" ).accordion({collapsible: true, heightStyle: "content" });
    }); 
    
[/code]

[Accordion - No auto height | jQuery UI](http://jqueryui.com/accordion/#no-
auto-height)

そのあと各要素の高さを指定すれば良いです。`height()`を使ってください。

[code]

    $("#a-contents").height(100);
    $("#b-contents").height(300);
    
[/code]

単位を指定しなければデフォルトでpx指定となります。


CC BY-SA 3.0
2015-01-22T02:23:16.473
5026
2015-01-22T03:40:12.723
2015-01-22T03:40:12.723
7214
7214
5025
answer