css - How to hide/show the content of a div with dynamic height? -

i trying develop small module (like collapse component of twitter bootstrap).

i don't know how treat content of div growing up/down, take me many descriptions, nothing's better example: collapse deployment.

you can see div.container block destined grow up/down. here declare height: 50px illustrate state of deployment.

is there way hide content (here part of text) out of height of parent div ?

i idea can access content deploying one, don't don't understand how make happen in css.

like this? jsfiddle example: http://jsfiddle.net/sw86b/1/

updated css

.header {   background-color: green;   height:20%; }  .container {   background-color: red;   height: 0;   overflow: hidden;    -webkit-transition: height 0.2s ease;      -moz-transition: height 0.2s ease;           transition: height 0.2s ease; }  .container.open { height: 50px;}  p { margin: 0; } 

use jquery toggle states

$('button').on('click', function(event){     $('.container').toggleclass('open'); });