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

});

Possible duplicate of jQuery Toggle Text?

Hashem Qolami
– Hashem Qolami

2016-02-29 07:13:04 +00:00
Commented Feb 29, 2016 at 7:13 — Hashem Qolami
– Hashem Qolami, Commented Feb 29, 2016 at 7:13

Bitter · Accepted Answer · 2014-03-08 01:40:47Z

12

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

edited Mar 8, 2014 at 1:40

answered Mar 8, 2014 at 0:30

Bitter

1541 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

BallSoHard Over a year ago

It's getting late ;) Thanks!

Diego Favero · Accepted Answer · 2014-10-03 16:42:33Z

1

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

answered Oct 3, 2014 at 16:42

Diego Favero

2,1552 gold badges26 silver badges33 bronze badges

1 Comment

Danish Over a year ago

although one liner solution would be this $.fn.extend({ toggleText: function(a, b){ return this.text(this.text() == b ? a : b); } }); not exactly one line, i mean. usage is same like yours $(".example").toggleText('Initial', 'Secondary');

user3257693 · Accepted Answer · 2015-11-27 01:04:52Z

1

Here is an interesting one based on the http://api.jquery.com/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.

answered Nov 27, 2015 at 1:04

user3257693

4863 silver badges15 bronze badges

1 Comment

Amit Kumar Over a year ago

plus one :) this is innovative

Levi Beckman · Accepted Answer · 2014-03-08 00:47:24Z

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

Marcel Burkhard · Accepted Answer · 2015-09-09 08:43:50Z

0

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 comparison.

edited Sep 9, 2015 at 8:43

Marcel Burkhard

3,5332 gold badges32 silver badges35 bronze badges

answered Sep 9, 2015 at 7:59

Ossaija D

672 bronze badges

Collectives™ on Stack Overflow

jQuery - Toggle text to change on click

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

1 Comment

1 Comment

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related