Mostrando solo una parte de un div

Question

Quiero tener un div que se muestra solo la parte superior (como 50px oh height) y otro (parte inferior como 100px) parte del div debe ser mostrado por jquery.show() o algo mas. ¿Alguien sabe cómo hacerlo?

Answer 1

Se puede ajustar la altura div a 50 px fijo y el clic se puede cambiar la altura de auto por Javascript/jQuery, o revertirlo de auto a 50 px.

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

Puede ajustar la altura de la div a la altura que desea que tenga desde el principio (50 px) a través de CSS. Establezca overflow: hidden; para ocultar el resto del contenido.

Después de que usted puede hacer algo como esto para mostrar el elemento completo:

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

Answer 3

me gustaría incrustar el contenido de una <div id="foo" style="height: 50px; overflow:hidden">. A continuación, controlar la altura de este 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); 
}