JQuery change text on click (Also change back)

Question

I have a div with a p inside it that says 'Fold it!'. When I click the div, the p's text changes to 'Expand it'. How can I make so when I click the div for the second time it will change back to 'Fold it'?

HTML:

<div id="fold">
    <p id="fold_p">Fold it</p>
</div>

JQuery:

<script>
  $(document).ready(function () {
    $("#fold").click(function () {
      $("#fold_p").text("Expand it");
    } )
  } );                  
</script>

Also, is it possible to make the transition a fade? Any help is much appreciated :)

Answer 1

$(document).ready(function () {
    $("#fold").click(function () {
        $("#fold_p").fadeOut(function () {
            $("#fold_p").text(($("#fold_p").text() == 'Fold it') ? 'Expand it' : 'Fold it').fadeIn();
        })
    })
});

jsFiddle example