Question

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

I want the “listen” anchor class button to change(toggle) into the “stop listening” anchor class button when I(or someone else) clicks on it(onclick). All the CSS and HTML is done, I just want a script which can toggle the anchor classes when the mouse clicks on them.

I am searching(googling) this for a while, with no luck whatsoever. And would really very much appreciate any help in the matter. Thanks Alot ! 🙂

Answer 1

do it using jQuery which makes life easier and takes care of cross browser issue. Include the jquery library in your HTML page and give the below function which will take care of your requirement.

$(function(){
    $("a.button").click(function(){
        which = $(this);
        if($(which).hasClass("listen")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("listen")
            .addClass("stop-listening");
        }
        else if($(which).hasClass("stop-listening")){
            $(which)
                    .text("custom text") // edited for changing text
            .removeClass("stop-listening")
            .addClass("listen");
        }
    })
})