jQuery toggle text defined only in html

Question

This has been answered some times but mine is a different approach.

I want to toggle (via jQuery) a text on click. But I want to have this text defined in the html (because it is multilanguage and it depends in langs, more preciselly in Smarty variables) so the $(this).html(condition ? "Some" : "Other" ) doesn't work.

My actual approach is:

HTML

<a class="readmore" href="#content">
    <span class="text" rel="Menos">Más</span>
</a>

JS

$(".readmore").click(function(event) {
    var contentSelectAnt = $(this).find(".text").html();
    var contentSelect = $(this).attr("rel");
    $(this).find(".text").html(contentSelect);
    $(this).attr("rel",contentSelectAnt);
)};

But I don't quite like the redundancy of the code and the unapropiate use of the rel attribute. I am sure there is a more jquery style solution.

Thanks for reading.

Tejs · Accepted Answer · 2011-05-10 15:24:17Z

1

You can attach data via the data method. However, you still have the problem of the initial and opposing state.

<a href="#content" data-content="SomeOtherContent">Text</a>

$('a').click(function()
{
     var currentObj = $(this);
     var currentText = currentObj.html();
     currentObj.html(currentObj.data('content'));
     currentObj.data('content', currentText);
});

answered May 10, 2011 at 15:24

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

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

4 Comments

Naoise Golden Over a year ago

I am testing this now. Will the data attributes give problems in older browsers?

Mark Schultheiss Over a year ago

data is jquery so it should be cross browser OK.

Naoise Golden Over a year ago

Works great! A Frédérik Hidis posted the same answer but more specific to the code in the question, but he deleted it. Thank you for your time.

Naoise Golden Over a year ago

Edited answer to apply to the question's code, hope this passes.

anothershrubery · Accepted Answer · 2011-05-10 15:54:28Z

1

I'm actually struggling to understand what you are trying to do, but cobbled together a DEMO

Don't know if thats what you mean but that was my understanding of the question.

EDIT:

DEMO 2 with the proper functionality?

DEMO 3 without the use of anchor tags.

edited May 10, 2011 at 15:54

answered May 10, 2011 at 15:34

anothershrubery

21.1k16 gold badges56 silver badges102 bronze badges

3 Comments

Naoise Golden Over a year ago

upvote for the jsFiddle (although it is not what I am looking for, thankyou)

anothershrubery Over a year ago

Ah...I understand what you mean now. But I would go along the same lines as Brian Fisher below. Something like this jsfiddle.net/aTLRU/3 for multilanguage support.

anothershrubery Over a year ago

You could even go without the anchor tags if you wanted. jsfiddle.net/aTLRU/4

Brian Fisher · Accepted Answer · 2011-05-10 15:42:14Z

0

How about just using two spans:

<a class="readmore" href="#content">
    <span class="text">Más</span>
    <span class="text" style="display: none;">Menos</span>
</a>

With javascript:

$(".readmore").click(function(event) {
    $(this).find('.text').toggle();
    return false;    
 });

Here is a demo, http://jsfiddle.net/Fq4bT/

edited May 10, 2011 at 15:42

answered May 10, 2011 at 15:25

Brian Fisher

24.1k15 gold badges80 silver badges82 bronze badges

5 Comments

Mark Schultheiss Over a year ago

I would write it $(".readmore").click(function(event) { $('.text').toggle(); return false; }); OR $(".readmore").click(function(event) { $('#more, #less').toggle(); return false; });

Mark Schultheiss Over a year ago

to make is "safer" you could select the children of the clicked as well. (so if there are more '.readmore', it works on just this one instance.

Brian Fisher Over a year ago

Yeah I agree, I just wanted to have a working sample at first. But when I went to simplify the code as you suggested in your first comment I also added the find on the the clicked element to limit the search to the descendants.

Naoise Golden Over a year ago

This one's good but I don't like to have the two spans, one with the inline style. Thank you.

Brian Fisher Over a year ago

You don't need to use an inline style you can use an external stylesheet by adding a class to the hidden span or without adding anything and using a.readmore span:last-child {display: none;}

Collectives™ on Stack Overflow

jQuery toggle text defined only in html

3 Answers 3

4 Comments

3 Comments

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

3 Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related