scripts.js

// polyfill to have classList work with IE8-9 Source: https://gist.github.com/k-gun/c2ea7c49edf7b757fe9561ba37cb19ca
;(function() {
    // helpers
    var regExp = function(name) {
        return new RegExp('(^| )'+ name +'( |$)');
    };
    var forEach = function(list, fn, scope) {
        for (var i = 0; i < list.length; i++) {
            fn.call(scope, list[i]);
        }
    };

    // class list object with basic methods
    function ClassList(element) {
        this.element = element;
    }

    ClassList.prototype = {
        add: function() {
            forEach(arguments, function(name) {
                if (!this.contains(name)) {
                    this.element.className += this.element.className.length > 0 ? ' ' + name : name;
                }
            }, this);
        },
        remove: function() {
            forEach(arguments, function(name) {
                this.element.className =
                    this.element.className.replace(regExp(name), '');
            }, this);
        },
        toggle: function(name) {
            return this.contains(name) 
                ? (this.remove(name), false) : (this.add(name), true);
        },
        contains: function(name) {
            return regExp(name).test(this.element.className);
        },
        // bonus..
        replace: function(oldName, newName) {
            this.remove(oldName), this.add(newName);
        }
    };

    // IE8/9, Safari
    if (!('classList' in Element.prototype)) {
        Object.defineProperty(Element.prototype, 'classList', {
            get: function() {
                return new ClassList(this);
            }
        });
    }

    // replace() support for others
    if (window.DOMTokenList && DOMTokenList.prototype.replace == null) {
        DOMTokenList.prototype.replace = ClassList.prototype.replace;
    }
})();

// Used to toggle the menu on small screens when clicking on the menu button, want to make this an accordian someday
function toggleShow(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}

//used to expand the accordian and hilight the box
function myAccordian(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
        x.previousElementSibling.className += " w3-deepred";
    } else { 
        x.className = x.className.replace(" w3-show", "");
        x.previousElementSibling.className = 
        x.previousElementSibling.className.replace(" w3-deepred", "");
    }
}

//used to toggle right side column "sidebar" which hides the button and halves the main content
function toggleSidecol() {
  document.getElementById("main").classList.toggle("w3-half");
  document.getElementById("sidebar").classList.toggle("w3-half");
  document.getElementById("sidebar").classList.toggle("w3-show");
  document.getElementById("floatbtn").classList.toggle("w3-hide");
//since there are many listitem we have to toggle with class rather than id 
  var el = document.getElementsByClassName("listitem");
  for (var i=0; i<el.length; ++i) {
   el[i].classList.toggle("w3-half");
  };}
//used to toggle the details popup
function popON(id) {
	document.getElementById(id).style.display='block';
}

function popOFF(id) {
	document.getElementById(id).style.display='none';
}