pure javascript tabs or accordion

a simple and flexible to create tabs, accordion lists, or whatever, using pure javascript. Works by applying and removing user defined styles to 2 sets of bound elements.

by shakibdshy

HTML

<ul>
    <li class="tabs">one</li>
    <li class="tabs">two</li>
    <li class="tabs">three</li>
    <li class="tabs">four</li>
</ul>

<div class="content">ONE</div>
<div class="content">TWO</div>
<div class="content">THREE</div>
<div class="content">FOUR</div>

<ul>
    <li class="tabs">one</li>
    <li class="tabs">two</li>
    <li class="tabs">three</li>
    <li class="tabs">four</li>
</ul>

<div class="content">ONE</div>
<div class="content">TWO</div>
<div class="content">THREE</div>
<div class="content">FOUR</div>

CSS

.active{
    background-color:#5555aa;
}

.hidden{
    /*display:none;*/
    background-color:#33aa33;
}

JavaScript

bindSets = function (tabClass, tabClassActive, contentClass, contentClassHidden) {
    //PARAMETERS
    //tabClass: 'the class name of the DOM elements that will be clicked',
    //tabClassActive: 'the class name that will be applied to the active tabClass element when clicked (must write your own css)',
    //contentClass: 'the class name of the DOM elements that will be modified when the corresponding tab is clicked',
    //contentClassHidden: 'the class name that will be applied to all contentClass elements except the active one (must write your own css)',
    //MUST call bindSets() after dom has rendered
        var tabs = document.getElementsByClassName(tabClass);
        var tabContent = document.getElementsByClassName(contentClass);
        if (tabs.length !== tabContent.length) { console.log('JS bindSets: sets contain a different number of elements') };

        for (var i = 0; i < tabs.length; i++) {
            tabs[i].matchedElement = tabContent[i];
            tabs[i].onclick = function () {
                for (var j = 0; j < tabs.length; j++) {
                    tabs[j].classList.remove(tabClassActive);
                }
                for (var k = 0; k < tabs.length; k++) {
                    tabContent[k].classList.add(contentClassHidden);
                }
                this.classList.add(tabClassActive);
                this.matchedElement.classList.remove(contentClassHidden);
            }
        }
        for (var x = 0; x < tabContent.length; x++) {
            tabContent[x].classList.add(contentClassHidden);
        }
    }
bindSets('tabs','active','content','hidden');