replace div with slidedown() animation

[paddyfields]

Hi, I've hit a brick wall with this as my JavaScript isn't too great.

I want to have a link than when clicked replaces the div contents (of which the link is in) with something different, but revealed via a jQuery slideDown() animation. So essentially you click the link, it disappears and a div slides down and appears in it's place. It is for a 'show more options' feature.

I've managed to make two scripts, one that has the slideDown() feature working, and one that replaces the content of the div once clicked, but I really can't work out how (or if) it is possible to combine them to achieve my aim? Or is there a better way to do this? Any help would be amazing!

slidedown

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<style type="text/css">
    .showOptions {
        float:left;
        padding:8px;
        margin:16px;
        border:1px solid red;
        width:400px;
        height:200px;
        background-color:#eee;
        color:white;
    }
</style>
<div class="showOptions">
    <a href="javascript:;" onclick="changeContent" ;>show options</a>
</div>
<script type="text/javascript">
    $(".showoptions").click(function () {
        $(this).hide().slideDown('slow');
    });
</script>
<script type="text/javascript">
    var newContent = 'these are the options!';

    function changeContent(idstr) {
        document.getElementById('show-options').innerHTML = newContent;
    }
</script>

replace div

<script type="text/javascript">
    var newContent = 'these are the options!';

    function changeContent(idstr) {
        document.getElementById('show-options').innerHTML = newContent;
    }
</script>
<div id="show-options">
    <a href="javascript:;" onclick="changeContent();">show options</a>
</div>

[paddyfields]

I tried all day then worked it out soon after posting... but if anyone is interested;

This replaces the content, then replaces the class, and animates the new content.

$("#show").click(function () {
    var newContent = 'these are the options!';
    document.getElementById('show-options').innerHTML = newContent;
    $("#show-options").removeClass("showOptions");
    $("#show-options").addClass("showOptions2");
    $("#show-options").hide().slideDown('slow');
});