Different height to slide using jQuery

Question

I'm trying to develop an ads which is similar to Pushdown Ads. What I want to is the initial height is 90 pixels just to click 'SHOW' button, and after clicked the button, the ads will be expanded into 200 pixels. What I have done so far is here my codings.

HTML

<div id="adsBox">

    <div id="ads">
        <a href="#"> <img src="http://i60.tinypic.com/16gkd5c.jpg" alt="ads"> </a>
        <a href="#" class="expandImage"> <img src="http://i62.tinypic.com/b9hx60.gif" alt="ads">
    </div>

    <p> <a href="#" id="showLink" class="showAds">HIDE</a> </p>
</div>

CSS

#ads {
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    display:none;
}

#adsBox {
    text-align:right;
    color:black;
    width:400px;
    height:90px;
    margin:0 auto;
    background-color:#E0E0E0;
    -webkit-border-bottom-right-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
    -moz-border-radius-bottomright: 6px;
    -moz-border-radius-bottomleft: 6px;
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
}

#adsBox a {
    color:#535353;
    padding:0;
    margin:0;
}

#adsBox a:hover {
    color:#4682b4;
}

#ads img {
    width:100%;
}

#showLink {
    text-decoration:none;
}

.hideLink {
    display:none;
}   

.expandImage {
    display:none;
}

jQuery

setTimeout(function () {
        $("#ads").slideToggle(1000);
    }, 1000);

    $(document).ready(function () {
        $('.showAds').click(function () {
            $('#ads').slideToggle(500);
            if ($(this).text() == 'HIDE') {
                $(this).text('SHOW');
            } else {
                $(this).text('HIDE');
            }
        });
    });

Here is my JSFIDDLE. The problem is how to make the height of ads start from 90 pixels before slide down into 200 pixels in one second? Any ideas?

Answer 1

you can use animate function in jQuery to change the height of the ad. Not sure if this is what you're after? http://jsfiddle.net/ewYc3/11/

Answer 2

Be aware: You're trying to show the full image (which has 90px of height), but you're limiting your div to only 400px width. You should try cropping the image or adding more width to #adsBox, because the div height is 90px from the beginning, but your image is keeping the proportions and it's only 37px.