jQuery toggle text defined only in html

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" : 开发者_如何学Python"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.

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

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.

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/