css3 slide up transistion - html

Question

Hi I've got a Div I wont to expose on Click of a link, it reveals a pop up at the bottom of the page... at the moment it looks like this:
http://jsfiddle.net/XPJC5/
body{margin:0;}
#lightbox {
display:none;
position:absolute;
bottom:5px;
z-index:1000;
width:100%;
background-color:#09F;
height:50px;
float:left;
font-family: 'helvetica_bqregular';
font-size:20px;
line-height:65px;
color:#FFF;
text-align:center;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target {
display:block;
}
Register
<div id="lightbox">
<div style=" background-color:#CBE376; width:100%; line-height:65px; height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;">
Consumer
</div>
<div style=" background-color:#94C8F1; line-height:65px; width:100%; height:65px;">
Business</div>
<div style=" background-color:#333; width:100%; height:65px;">Close
</div></div>
but I want the box to slide up from the bottom similar to this:
http://jsfiddle.net/R8zca/4/
Can anyone help with accomplishment? seems to fail on trial.
Thanks

Answer 1

remove the heights from the inline styles in the html and set the boxes to an initial height of 0px in the css, then use the css transition to bring them to full height
html
Register
<div id="lightbox">
<div style=" background-color:#CBE376; width:100%; line-height:65px; border-bottom:solid #999 thin; -webkit-box-shadow: 4px 4px 4px 4px #333;box-shadow: 4px 4px 4px 4px #333; clear:both;">
Consumer
</div>
<div style=" background-color:#94C8F1; line-height:65px; width:100%; ">
Business</div>
<div style=" background-color:#333; width:100%;">Close
</div></div>
css
body{margin:0;}
#lightbox div
{
height: 0px;
}
#lightbox {
display:block;
position:absolute;
bottom:5px;
z-index:1000;
width:100%;
background-color:#09F;
float:left;
font-family: 'helvetica_bqregular';
font-size:20px;
line-height:65px;
color:#FFF;
text-align:center;
}
/* works with IE8+, Firefox 2+, Safari, Chrome, Opera 10+ */
#lightbox:target div
{
height: 65px;
-webkit-transition:all 1s ease;
-moz-transition:all 1s ease;
}
http://jsfiddle.net/axrwkr/XPJC5/2