jQuery - Toggle text to change on click

Question

I have a menu button, which when clicked will slide down a div below.

My menu is title "+ Open menu"

When the menu button is clicked my code changes the title to "+ Menu" to indicate that the menu is open.

When the user closes the menu I would like the title to revert back to "- Menu"

This is my HTML which defines the class, test in this case.

<span class="test">+ Open menu</span>

Here is my jQuery function, I cannot figure out how to revert the menu state.

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").text("- Close menu");
});

});

Answer 1

$(".widget_head_type").click(function () {
    $(".widget_body_type").slideToggle("slow");
    ($(".test").text() === "+ Open menu") ? $(".test").text("- Close menu") : $(".test").text("+ Open menu");
});

Answer 2

jQuery.fn.extend({
    toggleText: function (a, b){
        var that = this;
            if (that.text() != a && that.text() != b){
                that.text(a);
            }
            else
            if (that.text() == a){
                that.text(b);
            }
            else
            if (that.text() == b){
                that.text(a);
            }
        return this;
    }
});

Use as:

$("#YourElementId").toggleText('After', 'Before');