Show and Hide group of classes based on data attributes
Instead of looping over the showClasses and hideClasses you can do a regex search and replace, then add/remove the class names:

var trimRegex = /^\s+|\s+$/g,
    selectorRegex = /(^| +)([-_a-zA-Z0-9]+)/g,
    callback = function(match, $1, $2) {
        if ($1) {
            return ", ." + $2;
        } else {
            return "." + $2;
        }
    },
    hideSelector = this.getAttribute("data-group")
        .replace(trimRegex, "")
        .replace(selectorRegex, callback),
    showSelector = this.getAttribute("data-target")
        .replace(trimRegex, "")
        .replace(selectorRegex, callback);

$(hideSelector).removeClass("show");
$(showSelector).addClass("show");


Secondly, since the document object exists the moment JavaScript begins executing, there is no need to wait for the document to load:

$(document).on("click", ".showHide", function() { ... });