How to toggle innerHTML between 2 alternative strings using Jquery

Question

I have span element which I wish to toggle the contents of, between the words 'Price' and 'Net', onclick of another element.

Essentially, it needs to test the existing cell contents to see which is currently present and then swap it with the other.

Something like this:

<input
    type    = "checkbox"
    name    = "element1"
    onclick = "$(#element2).toggleHTML('Price', 'Net')">

<span id="element2">Price</span>

I made up the toggleHTML method used above to demonstrate how I expect it might work.

Please use the search function to find similar questions and try using those first — ɴᴀᴛᴇ ᴅᴇᴠ
– ɴᴀᴛᴇ ᴅᴇᴠ, Commented May 14, 2013 at 12:49

Ram · Accepted Answer · 2015-02-26 06:09:39Z

8

You can use html or text method's callback function.

$('input[name="element1"]').click(function() {
    $('#element2').text(function(_, text) {
        return text === 'Price' ? 'Net' : 'Price';
    });
});

http://jsfiddle.net/BLPQJ/

You can also define a simple method:

$.fn.toggleHTML = function(a, b) {
    return this.html(function(_, html) {
        return $.trim(html) === a ? b : a;
    });
}

Usage:

$('#element2').toggleHTML('Price', 'Net');

http://jsfiddle.net/AyFvm/

edited Feb 26, 2015 at 6:09

answered May 14, 2013 at 12:46

Ram

145k16 gold badges174 silver badges201 bronze badges

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

2 Comments

Peter White Over a year ago

Thanks. This is the code I used. Although there are several answers here which are similar, you put a little more effort in than most, by providing multiple solutions & jsfiddle. Thanks and thanks also to everyone else.

bigmadwolf Over a year ago

Great little utility function, nice one. What is the function(-,html) about though ?

Adil Shaikh · Accepted Answer · 2013-05-14 12:47:23Z

1

You can do something like this :

var html = $('#element2').html();
html = html.indexOf('Price') > -1 ? "Net" : "Price"; 
$('#element2').html(html)

answered May 14, 2013 at 12:47

Adil Shaikh

44.8k17 gold badges95 silver badges112 bronze badges

Comments

bipen · Accepted Answer · 2013-05-14 12:47:51Z

1

try this

HTML

<input
type    = "checkbox"
name    = "element1"
id="input1">

JQUERY

$('#input1').click(function(){
    $('#element2').text(function(){
      return $('#element2').text()=="Price" ?"Net":"Price" ; 
    });
});

avoid using inline javascript ...

fiddle here

answered May 14, 2013 at 12:47

bipen

36.6k9 gold badges51 silver badges62 bronze badges

3 Comments

Peter White Over a year ago

Thanks. I'm wondering why it's best to avoid using inline javascript. I'm not nit-picking, just looking to increase my understanding. Thanks.

bipen Over a year ago

its not necessary actually.. it depends..avoiding makes the code cleaner and lot more easier to read if you have lots of codes in there..anyways here you go... programmers.stackexchange.com/questions/86589/…...

Peter White Over a year ago

Thanks for the link. Very informative (and the rest of the site too).

Emanuele Pavanello · Accepted Answer · 2013-05-14 12:46:43Z

0

this is the code : html :

<input type = "checkbox" name = "element1" id="element1">

Javascript :



$(document).ready(function()
{
    $("#element1").click(function()
    {
        if($("#element2").html() == "Price")
            $("#element2").html("Net");
        else
            $("#element2").html("Price");
    });
});

answered May 14, 2013 at 12:46

Emanuele Pavanello

8831 gold badge11 silver badges26 bronze badges

Comments

emeka · Accepted Answer · 2018-04-26 14:48:48Z

0

I have a similar issue, My page has multiple 'read more' toggles which suppose to change to 'read less' and back again on each click. but its only worked for the first iteration. the others only toggle once then stop, but the link works fine for the first one only.

code:

$(".morelink_L3").click(function() {
  $(this).find("span").html($(".morelink_L3 span").html() == 'Read less' ? 'Read more' : 'Read less');
});

html:

<span class="moreLink morelink_L3" value="True">
     <span>Read more</span>
</span>

answered Apr 26, 2018 at 14:48

emeka

731 silver badge5 bronze badges

Collectives™ on Stack Overflow

How to toggle innerHTML between 2 alternative strings using Jquery

5 Answers 5

2 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

2 Comments

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related