I have a span element as follows: <span id="download">Download</span>. This element is controlled by a few radio buttons. Basically, what I want to do is have 1 button to download the item selected by the radio buttons, but am looking to make it a little more "flashy" by changing the text inside the <span> to say more specifically what they are downloading. The span is the downloading button, and I have it animated so that the span calls slideUp(), then should change the text, then return by slideDown().Here is the code I am using that does not want to work.

$("input[name=method]").change(function() {
    if($("input[name=method]").val() == 'installer') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download");
        $('#download').addClass("downloadRequest").addClass("styling").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
    else if($("input[name=method]").val() == 'url') {
        $('#download').slideUp(500);
        $('#download').removeClass("downloadRequest").removeClass("styling").css({"cursor":"default"});
        $('#download').text("Download From Vendor Website");
        $('#download').addClass("styling").addClass("downloadRequest").css({"cursor":"pointer"});
        $('#download').slideDown(500);
    }
});

I changed the code a bit to be more readable so I know that it doesn't have the short code that jQuery so eloquently allows. Everything in the code works, with the exception of the changing of the text inside the span. I'm sure its a simple solution that I am just overlooking.

Any help is appreciated,

Eric R.