WEB STANDARDS CREATIVITY

if (target.className.match(pattern))
{
return true;
}
return false;
};
function addClass(target, classValue)
{
if (!hasClass(target, classValue))
{
if (target.className == "")
{
target.className = classValue;
}
else
{
target.className += " " + classValue;
}
}
return true;
};
function removeClass(target, classValue)
{
var removedClass = target.className;
var pattern = new RegExp("(^| )" + classValue + "( |$)");
removedClass = removedClass.replace(pattern, "$1");
removedClass = removedClass.replace(/ $/, "");
target.className = removedClass;
return true;
};
It’s not correct to do a direct string comparison on an element’s class, because it can actually contain multiple classes, each
separated by a space. This is the same reason you shouldn’t do a direct assignment to the class, because you might overwrite
existing classes. hasClass() checks whether the value you’re searching for is one of the multiple classes. addClass() makes
sure you don’t overwrite any existing classes or add the same class more than once. removeClass() removes only the specified
class while leaving all others intact.
Now that the click event is in place, every time that a user clicks the expand/collapse link for a content module, it will add
or remove the collapsed class as necessary. And that finishes our expand/collapse behavior!
chapter 9 Creating Dynamic Interfaces Using JavaScript
229