Toggle className on multiple elements at once

This example toggles the classname of multiple div's at once. The elements are selected by document.getAll().

Clik on the button to toggle the className:

Code-example:

<style type="text/css">
    .container {
        background-color: #DDD;
    }
    .container.red {
        background-color: #F00;
    }
</style>

<body>
    <div id="btncontainer">
        <button id="button-toggle">Click me toggle the class</button>
    </div>

    <div class="base-container">
        <div id="cont-1" class="container red"></div>
        <div id="cont-2" class="container red"></div>
        <div id="cont-3" class="container red"></div>
        <div id="cont-4" class="container red"></div>
    </div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var containers = document.getAll('.container');

    var toggle = function(e) {
        containers.toggleClass('red');
    };

    ITSA.Event.after('tap', toggle, '#button-toggle');
</script>

API Docs

Examples

Module-documentation

Toggle className on multiple elements at once