jQuery のアコーディオンに、それぞれのコンテンツ縦幅を設定したいです

投稿者: Anonymous

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

アコーディオンは5つありまして、その一つ一つにそれぞれのコンテンツをいれたサイトを作りたいのですが、たとえば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のコンテンツがいろいろ入っています。
          画像もあれこれ
          100pxもあれば十分です。
              </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-->

解決

デフォルトではそれぞれのコンテンツの高さは最も高い要素の高さに合わせられます。
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指定となります。

回答者: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *