CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user2532458
user2532458

Reputation: 13

How to toggle the anchor text using Jquery?

Here is my HTML code:

<label for="LoginControl">
<a href="login/" class="concealed noOutline">  Log in or Sign up  </a>
</label>

I need to replace the text Log in or Sign up with X when it is clicked and return to old text when clicked again.

Upvotes: 1

Views: 2991

Answers (3)

reggaemahn
reggaemahn

Reputation: 6648

It would be best if you give your a tag an id 

<label for="LoginControl"><a id="myLink" href="login/" class="concealed noOutline">Log in or Sign up</a></label>

and then this is how you can do it: fiddle

Upvotes: 1

user2404546
user2404546

Reputation:

HTML

    <label for="LoginControl">
     <a href="login/" class="concealed noOutline">  Log in or Sign up  </a>
    </label>

JQUERY

   $('label a').click(function(
        $(this).toggle(
               function(){$(this).text('X')},
               function(){$(this).text('Login or Sign Up')}
   )}

Read more on Jquery Toggle http://api.jquery.com/toggle/

Upvotes: -1

tymeJV
tymeJV

Reputation: 104775

You'll need a click handler for your anchor:

$("a.concealed").click(function() {

Now you'll need some logic:

$(this).text() == "X" ? "Log in or Sign up" : "X"; //if it equals X, return Log. Else X.

Now just combine into a function:

$("a.concealed").click(function() {
    var newText = $(this).text() == "X" ? "Log in or Sign up" : "X";
    $(this).text(newText);
});

Demo: http://jsfiddle.net/afuub/

Upvotes: 4

Related Questions