jquery - div の一部だけを表示する

Question

divの上部（高さ50pxなど）と他の部分（100pxなど）のdivをjquery.show（）などで表示する必要があります。それを行う方法を知っている人はいますか？

Answer 1

div の高さを 50px 固定に設定し、クリックすると高さを javascript/jQuery ごとに自動に変更するか、自動から 50px に戻すことができます。

CSS:

.mydiv{
  height:50px;
  min-height:50px;
  overflow:hidden;
}

jQuery:

$("document").ready(function(){
  $(".mydiv").click(function(){
    if($(".mydiv").css("height")!="50px"){
      $(".mydiv").slideDown();
    }
    else{
      $(".mydiv").slideUp();
    }
  }
}

Answer 2

コンテンツを に埋め込み<div id="foo" style="height: 50px; overflow:hidden">ます。次に、JQuery を使用してこの要素の高さを制御します。

$("#foo").css("height", whatever);

Answer 3

HTML:

<div id='example'>some content here</div>

CSS:

#example {height: 50px; overflow:hidden;}

jQuery:

$('#example').click(function(){
    $(this).animate({ height: 500px; }, 250);
}

Answer 4

CSS を使用して、div の高さを、開始点 (50px) から希望する高さに設定できます。overflow: hidden;残りのコンテンツを非表示に設定します。

その後、次のようにして要素全体を表示できます。

$("#id-of-element-to-click-to-show-entire-div").click(function(){
   $(this).slideDown("fast");
});