Toggle Class pure JS

by Zuhaib Siddiqui

HTML

<div>
    <p id='test'>
        Hello World
    </p>
</div>

<input id='test-btn' type='button' value='click' />

CSS

.test-class {
    font-size: 2em;
}

JavaScript

function toggleClass(element, className){
    if (!element || !className){
        return;
    }
    
    var classString = element.className, nameIndex = classString.indexOf(className);
    if (nameIndex == -1) {
        classString += ' ' + className;
    }
    else {
        classString = classString.substr(0, nameIndex) + classString.substr(nameIndex+className.length);
    }
    element.className = classString;
}

document.getElementById('test-btn').addEventListener('click', function() {
    toggleClass(document.getElementById('test'), 'test-class');
});