Question

This is my website. http://www.sarahjanetrading.com/js/j/index.html All the code+images+css is there with access to anyone

When anyone clicks on the listen button its background changes into the stop listening and vice versa. This is the functionality I wanted and I got it using jQuery.

What I also want now is the text to change too accordingly. Like, when someone clicks on the “listen” anchor, its text should change to “stop listening”, and the same for the stop listening anchor. Like a toggle anchor.

Thanks for the help ! Really appreciate it… 🙂

Answer 1

Here, I made this JSFiddle using your source code.

http://jsfiddle.net/K4Njj/2/

Here is the jQuery code:

$(function(){
    $("#container a").click(function(){
        if ($(this).html() == "Stop Listening")
        {
            $(this).html("Listen");
        }
        else if ($(this).html() == "Listen")
        {
            $(this).html("Stop Listening");
        }
    });
});

That will simply check to see if the text on the anchor is “Stop Listening” or “Listen” and if it is, it will switch it when you hit the button. It’s really the most elegant solution.