Slide a DIV up on load and down on click

Question

I'd like my "newsbox" div to slide up from the bottom of the page to above my footer on page load (with a little delay) then I'd like the DIV to slide down if the user clicks on "newsClose". Tried something but without success (have no knowledge in js) - Thanks for your help

JSFiddle: http://jsfiddle.net/7whAs/

JS

$(document).ready(function() {
    jQuery('#newsbox').delay(2000).slideDown();
    jQuery(function() {
    jQuery('.newsClose').click(function (e) {
        e.preventDefault();
        jQuery('#newsbox').slideUp();
    }); 
});

HTML

<div id="newsbox">
    <div class="news-text">
        <p>Blablablablabla blablabla blablabla <a href="index.html">Blabla blabla</a></p>
      </div>
    <div class="news-close">
        <a href="#" class="newsClose">Close X</a></div>
    </div>
</div>

CSS

#newsbox {
    background-color: #CCC;
    display:none;
    width: 750px;
    z-index: 10000;
    float: left;
    position: fixed;
    bottom: 45px;
    padding-top: 10px;
    padding-right: 20px;
    padding-bottom: 10px;
    padding-left: 20px;
}

.news-text {
    float: left;
    width: 600px;

}
.news-text p {
    color: #666666;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 13px;
}
.news-continue {
    float: left;
    width: 70px;
    text-align: center;
    margin-top: 10px;
    margin-left: 20px;
}
.news-close {
    width: 60px;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}
.news-close a,
.news-text a {
    color: #3E718E;
}
.news-continue a,
.news-close a {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 11px;
    line-height: 11px;
    font-weight: normal;
    color: #FFF;
    display: block;
    padding-top: 5px;
    padding-right: 0px;
    padding-bottom: 5px;
    padding-left: 0px;
    background-color: #3E718E;
}

.news-close a:hover {
    text-decoration: underline;
}
.news-continue a:hover,
.news-close a:hover {
    background-color: #333333;
    color: #FFF;
}

.news-close {
    float: right;
    width: 60px;
    font-size: 10px;
    line-height: 11px;
    text-align: right;
}

Answer 1

You were close. First enable jQuery on your fiddle (it's on the left side), then eliminate your second DOM ready function:

Demo http://jsfiddle.net/7whAs/1/

$(document).ready(function() {
    jQuery('#newsbox').delay(2000).slideDown();
    jQuery('.newsClose').click(function (e) {
        e.preventDefault();
        jQuery('#newsbox').slideUp();
    }); 
});