Changing javascript so CSS class is used

Hi, I'm not that great at javascript so can someone work out how I add "class=xxx" into the link that is produced from this script?

Javascript,

var COLLAPSABLE_PARENT_NAME = "more";
var COLLAPSABLE_PARENT_TYPE = "span";
var COLLAPSABLE_CHILD_TYPE = "p";

var COLLAPSABLE_EXPAND = "(show)";
var COLLAPSABLE_SHRINK = "(hide)";

init = function() {
    if(document.getElementById && document.createTextNode) {
        var entries = document.getElementsByTagName(COLLAPSABLE_PARENT_TYPE);
        for(i=0;i<entries.length;i++)
            if (entries[i].className==COLLAPSABLE_PARENT_NAME)
                assignCollapse(entries[i]);
    }
}

assignCollapse = function (div) {
    var button = document.createElement('a');
    button.style.cursor='pointer';
	button.style.color='#666666';
	button.style.fontWeight='bold';
	    button.setAttribute('expand', COLLAPSABLE_EXPAND);
    button.setAttribute('shrink', COLLAPSABLE_SHRINK);
    button.setAttribute('state', -1);
    button.innerHTML='dsds';
    div.insertBefore(button, div.getElementsByTagName(COLLAPSABLE_CHILD_TYPE)[0]);

    button.onclick=function(){
        var state = -(1*this.getAttribute('state'));
        this.setAttribute('state', state);
        this.parentNode.getElementsByTagName(COLLAPSABLE_CHILD_TYPE)[0].style.display=state==1?'none':'block';
        this.innerHTML = this.getAttribute(state==1?'expand':'shrink');
    };                   
    button.onclick();
}


window.onload=init;

Code (markup):

HTML produced from it,

 <a state="1" shrink="(hide)" expand="(show)" style="cursor: pointer; color: rgb(102, 102, 102); font-weight: bold;">(show)</a>

Code (markup):

 

I think adding another setAttribute would do it:

element.setAttribute("class, "xxx");

Code (markup):

Could you show a live example of your code in action?

 

Thanks for your reply.

Your code didn't work unfortunately, Dreamweaver suggested it broke the rest of the javascript.

I have used this script for my news articles and results page:

 

D'oh! I just noticed that I forgot the closing " on the end of class. Try this:

element.setAttribute("class", "xxx");

Code (markup):

I'll have a look at your pages.

 

That also didn't work... the expand link just didn't show up.

assignCollapse = function (div) {
    var button = document.createElement('a');
    button.style.cursor='pointer';
	button.style.color='#666666';
	button.style.fontWeight='bold';
    element.setAttribute("class", "xxx");
    button.setAttribute('expand', COLLAPSABLE_EXPAND);
    button.setAttribute('shrink', COLLAPSABLE_SHRINK);
    button.setAttribute('state', -1);
    button.innerHTML='dsds';
    div.insertBefore(button, div.getElementsByTagName(COLLAPSABLE_CHILD_TYPE)[0]);

Code (markup):

 

Ah ha! Use this:

	button.setAttribute("class", "xxx");

Code (markup):

It needed to be button, not element.

You can take a look at the attached file that I used to get it working.

 

Unfortunately IE doesn't accept the class when it is set that way.

Do it like this:

button.className = "xxx";

 

Thanks for all your help people.

I used MMJ's method.