Pure JS Dots

by Preston Badeer

HTML

<div id="green">
    <img id="g1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNpi/P//PwMMKG/yRXCg4K7fZkYYmwmfQnRxJnwK0TUwKm30wasQGTAxkAAGi2LkcMQHQOqY0AMel0IUZ+DSgCwOEGAAmhMc7gyFuOAAAAAASUVORK5CYII=" />
    <img id="g2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNpi/P//PwMMKG/yRXCg4K7fZkYYmwmfQnRxJnwK0TUwKm30wasQGTAxkAAGi2LkcMQHQOqY0AMel0IUZ+DSgCwOEGAAmhMc7gyFuOAAAAAASUVORK5CYII=" />
    <img id="g3" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNpi/P//PwMMKG/yRXCg4K7fZkYYmwmfQnRxJnwK0TUwKm30wasQGTAxkAAGi2LkcMQHQOqY0AMel0IUZ+DSgCwOEGAAmhMc7gyFuOAAAAAASUVORK5CYII=" />
    <img id="g4" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNpi/P//PwMMKG/yRXCg4K7fZkYYmwmfQnRxJnwK0TUwKm30wasQGTAxkAAGi2LkcMQHQOqY0AMel0IUZ+DSgCwOEGAAmhMc7gyFuOAAAAAASUVORK5CYII=" />
    <img id="g5" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAElJREFUeNpi/P//PwMMKG/yRXCg4K7fZkYYmwmfQnRxJnwK0TUwKm30wasQGTAxkAAGi2LkcMQHQOqY0AMel0IUZ+DSgCwOEGAAmhMc7gyFuOAAAAAASUVORK5CYII=" />
</div>
<div id="red">
    <img id="r1" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEJJREFUeNpi/P//PwMMvJNVRXCgQOjxbUYYmxGmGJtCdA1gxfgUImtgfCujQlAhDDAxkAAGiWLSQoPkcCY2BgECDAAEXSwqjnXalQAAAABJRU5ErkJggg==" />
    <img id="r2" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAYAAACprHcmAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAEJJREFUeNpi/P//PwMMvJNVRXCgQOjxbUYYmxGmGJtCdA1gxfgUImtgfCujQlAhDDAxkAAGiWLSQoPkcCY2BgECDAAEXSwqjnXalQAAAABJRU5ErkJggg==" />
    <img id="r3"...

CSS

/* This is the class turned on/off by the JS */
 .hide {
    visibility: hidden;
}
#green, #red {
    /* Forces the dots to stack */
    width: 11px;
    /* Puts the stacks of dots side-by-side */
    float: left;
    /* Adds some whitespace between dot stacks */
    padding: 0 4px;
}

JavaScript

function toggleHide(id) {
    var element = document.getElementById(id),
        className = "hide",
        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;
}

// Pass in the ID of the element you want to
// toggle visibility of. You do have to call it
// multiple times to toggle multiple elements.

// IDs: red (all), r1, r2, r3, r4, r5, green (all), g1, g2, g3, g4, g5
toggleHide('g2');