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

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

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

<script>
？？？？？？？？？？？
</script>

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

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

<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-->