jQuery Toggle Text?

Question

How to toggle HTML text of an anchor tag using jQuery? I want an anchor that when clicked the text alternates between Show Background & Show Text as well as fading in & out another div. This was my best guess:

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    $("#show-background").toggle(function (){
        $(this).text("Show Background")
        .stop();
    }, function(){
        $(this).text("Show Text")
        .stop();
    });
});

What was wrong with the code you posted? It helps to know the problem before having to look for the solution to it. — Yacoby
– Yacoby, Commented Jan 28, 2010 at 15:08

Kyle Butt · Accepted Answer · 2010-01-28 15:14:20Z

133

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow'); 
    });

    var text = $('#show-background').text();
    $('#show-background').text(
        text == "Show Background" ? "Show Text" : "Show Background");
});

Toggle hides or shows elements. You could achieve the same effect using toggle by having 2 links and toggling them when either is clicked.

answered Jan 28, 2010 at 15:14

Kyle Butt

9,8803 gold badges24 silver badges16 bronze badges

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

1 Comment

George Hawkins Over a year ago

For something similar that allows you to keep the <a> tag text, e.g. "Show Text" and "Show Background", together with the anchor HTML, rather than separating it off into jQuery code, see stackoverflow.com/a/28500651/245602

JxAxMxIxN · Accepted Answer · 2017-02-09 22:39:02Z

75

The most beautiful answer is... Extend jQuery with this function...

$.fn.extend({
    toggleText: function(a, b){
        return this.text(this.text() == b ? a : b);
    }
});

HTML:

<button class="example"> Initial </button>

Use:

$(".example").toggleText('Initial', 'Secondary');

I've used the logic ( x == b ? a : b ) in the case that the initial HTML text is slightly different (an extra space, period, etc...) so you'll never get a duplicate showing of the intended initial value

(Also why I purposely left spaces in the HTML example ;-)

Another possibility for HTML toggle use brought to my attention by Meules [below] is:

$.fn.extend({
        toggleHtml: function(a, b){
            return this.html(this.html() == b ? a : b);
        }
    });

HTML:

<div>John Doe was an unknown.<button id='readmore_john_doe'> Read More... </button></div>

Use:

$("readmore_john_doe").click($.toggleHtml(
    'Read More...', 
    'Until they found his real name was <strong>Doe John</strong>.')
);

(or something like this)

edited Feb 9, 2017 at 22:39

answered Sep 16, 2016 at 7:28

JxAxMxIxN

1,7311 gold badge17 silver badges20 bronze badges

3 Comments

Meules Over a year ago

Brilliant solution! You can change text to html and toggle classes to use this function as a read more/read less function :)

JxAxMxIxN Over a year ago

Sure could! In web-apps and cases where you don't need to worry about the text being found by search engines this is a great solution. Just keep in mind that if the content in the "read more" section could actually help website ranking in search engines due to its content, this might not be the best option.

Mego Over a year ago

Mate, you are my personal hero for this! Thank you.

Dan Atkinson · Accepted Answer · 2014-05-14 16:17:43Z

37

Sorry the problem is me! the was out of sync but this was because I have the HTML text the wrong way around. On the first click I want the div to fade out and the text to say "Show Text".

Will check more thoroughly next time before I ask!

My code is now:

$(function() {
  $("#show-background").toggle(function (){
    $("#content-area").animate({opacity: '0'}, 'slow')
    $("#show-background").text("Show Text")
      .stop();
  }, function(){
    $("#content-area").animate({opacity: '1'}, 'slow')
    $("#show-background").text("Show Background")
      .stop();
  });
});

Thanks again for the help!

edited May 14, 2014 at 16:17

Dan Atkinson

11.8k14 gold badges89 silver badges116 bronze badges

answered Jan 28, 2010 at 15:23

mtwallet

5,09614 gold badges53 silver badges75 bronze badges

1 Comment

user Over a year ago

Readers, beware! This overload of toggle function was removed in jQuery 1.9, you won't be able to use it unless you restore this functionality. But perhaps it is better if you proceed to other answers.

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

26

Improving and Simplifying @Nate's answer:

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:43

Diego Favero

2,1552 gold badges26 silver badges33 bronze badges

1 Comment

Vishwa Over a year ago

@webkitfanz change text in places like that.text(a) to html, simple. See -> $.fn.extend({ toggleText: function(a, b){ return this.html(this.html() == b ? a : b); } });

Nate-Wilkins · Accepted Answer · 2013-07-03 15:31:28Z

16

jQuery.fn.extend({
        toggleText: function (a, b){
            var isClicked = false;
            var that = this;
            this.click(function (){
                if (isClicked) { that.text(a); isClicked = false; }
                else { that.text(b); isClicked = true; }
            });
            return this;
        }
    });

$('#someElement').toggleText("hello", "goodbye");

Extension for JQuery that only does toggling of text.

JSFiddle: http://jsfiddle.net/NKuhV/

answered Jul 3, 2013 at 15:31

Nate-Wilkins

5,5324 gold badges51 silver badges63 bronze badges

1 Comment

acarito Over a year ago

This was very easy to implement. At first I wasn't sure it would do the trick because my click action also fires a slideToggle, but it did the trick with no issues. It's great for "show Text"/"Hide Text" uses. Thanks!

Judson Terrell · Accepted Answer · 2017-01-15 16:03:14Z

16

var el  = $('#someSelector');    
el.text(el.text() == 'view more' ? 'view less' : 'view more');

answered Jan 15, 2017 at 16:03

Judson Terrell

4,3262 gold badges32 silver badges51 bronze badges

2 Comments

user9008566 Over a year ago

Works. Best answer imo, did it in 2 lines.

BradTheBluefish Over a year ago

Simple and to the point. Just make sure your initial toggle text is 'view more'

Eugene Koekemoer · Accepted Answer · 2011-06-20 19:36:19Z

7

Why don't you just stack them ::

$("#clickedItem").click(function(){
  $("#animatedItem").animate( // );
}).toggle( // <--- you just stack the toggle function here ...
function(){
  $(this).text( // );
},
function(){
  $(this).text( // );
});

answered Jun 20, 2011 at 19:36

Eugene Koekemoer

871 silver badge1 bronze badge

1 Comment

solipsicle Over a year ago

This implementation of toggle was removed from Jquery v1.9, it now toggles visibility. See here

Community · Accepted Answer · 2017-05-23 11:54:59Z

6

Use html() to toggle HTML content. Similar to fflyer05's code:

$.fn.extend({
    toggleText:function(a,b){
        if(this.html()==a){this.html(b)}
        else{this.html(a)}
    }
});

Usage:

<a href="#" onclick='$(this).toggleText("<strong>I got toggled!</strong>","<u>Toggle me again!</u>")'><i>Toggle me!</i></a>

Fiddle: http://jsfiddle.net/DmppM/

edited May 23, 2017 at 11:54

CommunityBot

11 silver badge

answered Feb 12, 2014 at 9:46

Tomasz Majerski

1992 silver badges7 bronze badges

Comments

firstandlastpost · Accepted Answer · 2015-05-05 20:25:26Z

I've written my own little extension for toggleText. It may come in handy.

Fiddle: https://jsfiddle.net/b5u14L5o/

jQuery Extension:

jQuery.fn.extend({
    toggleText: function(stateOne, stateTwo) {
        return this.each(function() {
            stateTwo = stateTwo || '';
            $(this).text() !== stateTwo && stateOne ? $(this).text(stateTwo)
                                                    : $(this).text(stateOne);
        });  
    }
});

Usage:

...
<button>Unknown</button>
...
//------- BEGIN e.g. 1 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Show', 'Hide'); // Hide, Show, Hide ... and so on.
});
//------- END e.g. 1 -------

//------- BEGIN e.g. 2 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Unknown', 'Hide'); // Hide, Unknown, Hide ...
});
//------- END e.g. 2 -------

//------- BEGIN e.g. 3 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText(); // Unknown, Unknown, Unknown ...
});
//------- END e.g.3 -------

//------- BEGIN e.g.4 -------
//Initial button text is: 'Unknown'
$('button').on('click', function() {
    $(this).toggleText('Show'); // '', Show, '' ...
});
//------- END e.g.4 -------

aWebDeveloper · Accepted Answer · 2015-01-31 09:07:24Z

3

Use this

jQuery.fn.toggleText = function() {
    var altText = this.data("alt-text");
    if (altText) {
        this.data("alt-text", this.html());
        this.html(altText);
    }
};

Here is how you sue it

 
   jQuery.fn.toggleText = function() {
    	var altText = this.data("alt-text");

    	if (altText) {
    		this.data("alt-text", this.html());
    		this.html(altText);
    	}
    };

    $('[data-toggle="offcanvas"]').click(function ()  {

    	$(this).toggleText();
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>

You can even use html provided it's html encoded properly

answered Jan 31, 2015 at 9:07

aWebDeveloper

38.7k42 gold badges179 silver badges248 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 12:34:44Z

2

Modifying my answer from your other question, I would do this:

$(function() {
 $("#show-background").click(function () {
  var c = $("#content-area");
  var o = (c.css('opacity') == 0) ? 1 : 0;
  var t = (o==1) ? 'Show Background' : 'Show Text';
  c.animate({opacity: o}, 'slow');
  $(this).text(t);
 });
});

edited May 23, 2017 at 12:34

CommunityBot

11 silver badge

answered Jan 28, 2010 at 15:17

Mottie

86.7k30 gold badges132 silver badges248 bronze badges

3 Comments

mtwallet Over a year ago

Wow will take me a bit work how this is working but thanks for the help I will try it out!

mtwallet Over a year ago

BTW I have now linked to jQuery 1.4 and broken down the Tools library isolating only the parts I need. I think the conflict was with the Flash Embed part of the library.

Mottie Over a year ago

In case you didn't know, the o and t are defined in a ternary operator (en.wikipedia.org/wiki/Ternary_operation).... and oops I forgot to add var in front - I will edit that now

nhahtdh · Accepted Answer · 2013-09-20 20:02:49Z

1

In most cases you would have more complex behavior tied to your click event. For example a link that toggles visibility of some element, in which case you would want to swap link text from "Show Details" to "Hide Details" in addition to other behavior. In that case this would be a preferred solution:

$.fn.extend({
  toggleText: function (a, b){
    if (this.text() == a){ this.text(b); }
    else { this.text(a) }
  }
);

You could use it this way:

$(document).on('click', '.toggle-details', function(e){
  e.preventDefault();
  //other things happening
  $(this).toggleText("Show Details", "Hide Details");
});

edited Sep 20, 2013 at 20:02

nhahtdh

56.9k15 gold badges131 silver badges164 bronze badges

answered Sep 20, 2013 at 18:32

fflyer05

87311 silver badges18 bronze badges

1 Comment

Kat Over a year ago

Nice, the toggleText definition misses a '}'

RulazISC · Accepted Answer · 2013-11-26 05:00:19Z

1

$.fn.toggleText = function(a){
    var ab = a.split(/\s+/);
    return this.each(function(){
        this._txIdx = this._txIdx!=undefined ? ++this._txIdx : 0;
        this._txIdx = this._txIdx<ab.length ? this._txIdx : 0; 
        $(this).text(ab[this._txIdx]);
    }); 
}; 
$('div').toggleText("Hello Word");

answered Nov 26, 2013 at 5:00

RulazISC

111 bronze badge

1 Comment

Joseph Dailey Over a year ago

is this meant to be added to jquery?

J.Archiquette · Accepted Answer · 2014-07-23 18:01:13Z

1

<h2 id="changeText" class="mainText"> Main Text </h2>

(function() {
    var mainText = $('.mainText').text(),
        altText = 'Alt Text';

    $('#changeText').on('click', function(){
        $(this).toggleClass('altText');
        $('.mainText').text(mainText);
        $('.altText').text(altText);
    });

})();

answered Jul 23, 2014 at 18:01

J.Archiquette

111 bronze badge

Comments

Andi · Accepted Answer · 2015-08-19 14:35:41Z

1

Perhaps I'm oversimplifying the problem, but this is what I use.

$.fn.extend({
    toggleText: function(a, b) {
        $.trim(this.html()) == a ? this.html(b) : this.html(a);
    }
});

answered Aug 19, 2015 at 14:35

Andi

3,7571 gold badge22 silver badges12 bronze badges

Comments

Yurii Rabeshko · Accepted Answer · 2016-04-27 10:16:58Z

1

Nate-Wilkins's improved function:

jQuery.fn.extend({
    toggleText: function (a, b) {
        var toggle = false, that = this;
        this.on('click', function () {
            that.text((toggle = !toggle) ? b : a);
        });
        return this;
    }
});

html:

<button class="button-toggle-text">Hello World</button>

using:

$('.button-toggle-text').toggleText("Hello World", "Bye!");

answered Apr 27, 2016 at 10:16

Yurii Rabeshko

64110 silver badges17 bronze badges

Comments

Ricky Levi · Accepted Answer · 2019-02-03 11:42:44Z

1

You can also toggleText by using toggleClass() as a thought ..

.myclass::after {
 content: 'more';
}
.myclass.opened::after {
 content: 'less';
}

And then use

$(myobject).toggleClass('opened');

answered Feb 3, 2019 at 11:42

Ricky Levi

8,2093 gold badges64 silver badges77 bronze badges

Comments

Erez Lieberman · Accepted Answer · 2014-01-16 17:46:55Z

0

this is not the very clean and smart way but its very easy to understand and use somtimes - its like odd and even - boolean like:

  var moreOrLess = 2;

  $('.Btn').on('click',function(){

     if(moreOrLess % 2 == 0){
        $(this).text('text1');
        moreOrLess ++ ;
     }else{
        $(this).text('more'); 
        moreOrLess ++ ;
     }

});

answered Jan 16, 2014 at 17:46

Erez Lieberman

2,03725 silver badges31 bronze badges

Comments

ortonomy · Accepted Answer · 2016-01-04 15:09:59Z

0

Why not keep track of the state of through a class without CSS rules on the clickable anchor itself

$(function() {
    $("#show-background").click(function () {
        $("#content-area").animate({opacity: 'toggle'}, 'slow');
        $("#show-background").toggleClass("clicked");
        if ( $("#show-background").hasClass("clicked") ) {
            $(this).text("Show Text");
        }
        else {
            $(this).text("Show Background");
        }
    });
});

answered Jan 4, 2016 at 15:09

ortonomy

6911 gold badge10 silver badges18 bronze badges

Comments

mriiiron · Accepted Answer · 2016-11-11 20:24:16Z

0

var jPlayPause = $("#play-pause");
jPlayPause.text(jPlayPause.hasClass("playing") ? "play" : "pause");
jPlayPause.toggleClass("playing");

This is a piece of thought using jQuery's toggleClass() method.

Suppose you have an element with id="play-pause" and you want to toggle the text between "play" and "pause".

answered Nov 11, 2016 at 20:24

mriiiron

1174 bronze badges

Collectives™ on Stack Overflow

jQuery Toggle Text?

20 Answers 20

1 Comment

3 Comments

1 Comment

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

20 Answers 20

1 Comment

3 Comments

1 Comment

1 Comment

1 Comment

2 Comments

1 Comment

Comments

Comments

Comments

3 Comments

1 Comment

1 Comment

Comments

Comments

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related