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");
});

});

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");
});

});

• javascript
• jquery
• toggle

• Possible duplicate of jQuery Toggle Text? – Hashem Qolami Commented Feb 29, 2016 at 7:13

5 Answers 5

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

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');

Here is an interesting one based on the http://api.jquery./toggle/

HTML

<span class="test">+ Open menu</span>
<span class="test" style="display:none">- Close menu</span>

JS

$(document).ready(function () {
$(".widget_head_type").click(function () 
{
    $(".widget_body_type").slideToggle("slow");
    $(".test").toggle();
});

Simple, just toggles the all tags with class test whether hidden or visible.

WORKING FIDDLE HERE

I've guessed at your html, and made some notes for alternatives, but you consider the following:

HTML:

<div class="some_parent_class">
    <div class="widget_head_type">
        <span class="test">+ Menu</span>
    </div>
    <div class="widget_body_type">
        Body
    </div>
</div>

JS:

jQuery(function ($) {
    $('.widget_head_type').each(function () {
        // closures
        var $toggle = $(this);
        var $parent = $toggle.closest('.some_parent_class');
        var $target = $parent.find('.widget_body_type');
        var $label = $toggle.find('.test');
        var bIsTweening = false;
        // OR var $target = $toggle.next('.widget_body_type');
        // event methods (closures)
        var fClickToggle = function () {
            if (!bIsTweening) {
                bIsTweening = true;
                $target.slideToggle('slow', fToggleCallback);
            }
        };
        var fToggleCallback = function () {
            bIsTweening = false;
            fSetLabel();
        };
        var fSetLabel = function () {
            var sLabel = $label.text().replace('+', '').replace('-', '');
            sLabel = ($target.is(':visible') ? '-' : '+') + sLabel;
            $label.html(sLabel);
        };
        // handle event
        $toggle.click(fClickToggle);
        $target.hide();
        fSetLabel();
    });
});

had same issue and this is how i solved it: using your code example.

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

use two equal signs for parison.