Mostrando solo parte di un div

Question

Voglio avere un div che è mostrato solo la parte superiore di esso (come 50px oh altezza) e altri (in basso come 100px) parte del div dovrebbe essere mostrato da jquery.show() o qualcos'altro. C'è qualcuno sa come farlo?

Answer 1

È possibile impostare l'altezza div a 50px fisso e al clic è possibile modificare l'altezza per auto per JavaScript/jQuery, o tornare da auto per 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

È possibile impostare l'altezza del div all'altezza che si desidera avere dall'inizio (50px) attraverso i CSS. Impostare overflow: hidden; per nascondere il resto del contenuto.

Dopo di che si può fare qualcosa di simile per mostrare l'intero elemento:

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

Answer 3

mi piacerebbe incorporare il contenuto di una <div id="foo" style="height: 50px; overflow:hidden">. Poi controllare l'altezza di questo elemento con jQuery:

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

Answer 4

HTML:

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

CSS:

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

jQuery:

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