2012-04-16 10 views
8

divの50pxの高さのような部分と100pxの部分の下に表示されるdivをjquery.show()で表示する必要があります。または、他の何か。それを行う方法を誰かが知っていますか?divの一部を表示する

Here is an image to help explain

答えて

7

あなたは、固定は50pxとのあなたはjavascriptを/ jQueryのあたりにautoに高さを変更することができますクリックするかは50pxに自動から、それを元に戻すのdivの高さを設定することができます。

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(); 
    } 
    } 
} 
0

あなたはそれがCSSを通じて開始(は50px)から持ちたい高さにdiv要素の高さを設定することができます。 overflow: hidden;を設定して残りのコンテンツを非表示にします。

は、その後、あなたは全体の要素を表示するには、このような何かを行うことができます。

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

私は<div id="foo" style="height: 50px; overflow:hidden">でコンテンツを埋め込むと思います。次に、jQueryを使って、この要素の高さを制御:

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

はい、それが働いているおかげ。 – Mtok

1

HTML:

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

CSS:

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

のjQuery:

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

それはうまく見えますが、構文が正しいことを確信しています、bcsはjavascriptの部分で警告を出しています。 – Mtok

+1

これは ";" like $(this)。アニメート({height:500px}、250); – Mtok

関連する問題