jquery animate complete

Question

<div class="factuuradres"></br><h3></h3></div>
<div class="factuuradresbutton">Meer Informatie</div>           

<script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
        $(".factuuradres").animate({
            height: "310px"
        }, 500 );
        complete: function() {
            $(".factuuradresbutton").html("Toch geen factuuradres")
            $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
        }
    },

    function(){
        $(".factuuradres").animate({
            height: "160px"
        }, 500 );
        $(".factuuradresbutton").html("Ander factuuradres?")
        $(".factuuradres").html("Factuuradres")
    });
</script>

I'm wondering why the complete: function() is not working, anyone who can give me advice?

Also this is the working script, but it breaks once you click on the button. After an second or two it works like intended.

    <script type="text/javascript">
    $(".factuuradresbutton").toggle(function(){
    $(".factuuradres").animate({
        height: "610px"
    }, 500 );
    $(".factuuradresbutton").html("Toch geen factuuradres")
    $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>')
    },
    function(){
    $(".factuuradres").animate({
        height: "160px"
    }, 500 );
    $(".factuuradresbutton").html("Ander factuuradres?")
    $(".factuuradres").html("Factuuradres")
    });
    </script>

Answer 1

Just seen your comment and changed my answer to this: http://jsfiddle.net/t3ttW/1/

$(".factuuradresbutton").toggle(function () {
      $(".factuuradres").animate({
        height: "610px"
      }, {
        duration: 500,
        complete: function () {
          $(".factuuradresbutton").html("Toch geen factuuradres")
          $(".factuuradres").html('<h2>Factuuradres</h2><div class="title_textbox3"><h3>Postcode:</h3></div><div class="textbox3"><input type="text" class="postcode" name="Postcode" value=""/></div><div class="title_textbox4"><h3>Huisnummer:</h3></div><div class="textbox4"><input type="text" class="huisnummer" name="Huisnummer" value=""/></div><div class="title_textbox"><h3>Straat:</h3></div><div class="textbox"><input type="text" class="field" name="Straat" value=""/></div><div class="title_textbox"><h3>Plaats:</h3></div><div class="textbox"><input type="text" class="field" name="Plaats" value=""/></div>');
        }
      });
    },

    function () {
      $(".factuuradres").animate({
        height: "160px"
      }, 500);
      $(".factuuradresbutton").html("Ander factuuradres?")
      $(".factuuradres").html("Factuuradres")
    });