Preview code that is put into single elements without needing a dev enviroment

ATDemo.html

<!-- /*
    /
   /   \_|\                     /
  /                            /
 /        A-Train Marketing   /
/                            /
    ATDemo      0.2.2       /
                          */ -->

<div class="atdemo-original">
	The Original Stuff
</div>


<div class="atdemo-1" style="display:none">
	New Stuff
</div>


<div class="atdemo-2" style="display:none">
	Other Stuff
</div>


<!-- ATDemo 0.2.2 -->
<script>
	
	console.log('~ ATDemo ready');
	window.atdemo = getUrlVars()['atdemo'] || false;

	var atdemo_initial = window.atdemo;

	setInterval( function() {
	    var x = window.atdemo;
	    if( x != atdemo_initial ) {
	    	console.log('~ ATDemo Updated');
	    	runATDemo(atdemo_initial);
	        atdemo_initial = window.atdemo;
	    }
	}, 1000);

	if(typeof window.atdemo !== 'undefined' && window.atdemo.length > 0) {
		console.log('~ Starting ATDemo');
		runATDemo();
	}

	function runATDemo(oldval) {
		if (typeof window['atdemo' + atdemo] === "function") {
			console.log('Running atdemo' + atdemo + ' function');
		    window['atdemo' + atdemo]();
		}
		oldval = oldval || false;
		console.log( '~ Running A-Train Demo Previewer: atdemo=' + window.atdemo );
		if( window.atdemo > 0 ) {
			removeVisibility('.atdemo-original');
			enableVisibility('.atdemo-' + window.atdemo);
		} else if ( window.atdemo == 0 ) {
			removeVisibility('.atdemo-' + oldval);
			enableVisibility('.atdemo-original');
		}
	}

	function removeVisibility(selector) {
		if(selector.charAt(0) === '#') {
			var e = document.getElementById( selector.substring(1) );
			e.style.display = 'none';
		} else if(selector.charAt(0) === '.') {
			var classes = document.querySelectorAll(selector),
			    i = 0,
			    l = classes.length;
			for (i; i < l; i++) {
			    classes[i].style.display = 'none';
			}
		} else {
			return false;
		}
	}
	function enableVisibility(selector) {
		if(selector.charAt(0) === '#') {
			var e = document.getElementById( selector.substring(1) );
			e.style.display = 'block';
		} else if(selector.charAt(0) === '.') {
			var classes = document.querySelectorAll(selector),
			    i = 0,
			    l = classes.length;
			for (i; i < l; i++) {
			    classes[i].style.display = 'block';
			}
		} else {
			return false;
		}
	}
	function getUrlVars() {
		var vars = {};
		var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
			vars[key] = value;
		});
		return vars;
	}
	
</script>

<!-- atmc-atdemo-min 0.2.2 -->
<script>
console.log("~ ATDemo ready"),window.atdemo=getUrlVars().atdemo||!1;var atdemo_initial=window.atdemo;function runATDemo(e){"function"==typeof window["atdemo"+atdemo]&&(console.log("Running atdemo"+atdemo+" function"),window["atdemo"+atdemo]()),e=e||!1,console.log("~ Running A-Train Demo Previewer: atdemo="+window.atdemo),0<window.atdemo?(removeVisibility(".atdemo-original"),enableVisibility(".atdemo-"+window.atdemo)):0==window.atdemo&&(removeVisibility(".atdemo-"+e),enableVisibility(".atdemo-original"))}function removeVisibility(e){if("#"===e.charAt(0)){document.getElementById(e.substring(1)).style.display="none"}else{if("."!==e.charAt(0))return!1;for(var o=document.querySelectorAll(e),i=0,t=o.length;i<t;i++)o[i].style.display="none"}}function enableVisibility(e){if("#"===e.charAt(0)){document.getElementById(e.substring(1)).style.display="block"}else{if("."!==e.charAt(0))return!1;for(var o=document.querySelectorAll(e),i=0,t=o.length;i<t;i++)o[i].style.display="block"}}function getUrlVars(){var t={};window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi,function(e,o,i){t[o]=i});return t}setInterval(function(){window.atdemo!=atdemo_initial&&(console.log("~ ATDemo Updated"),runATDemo(atdemo_initial),atdemo_initial=window.atdemo)},1e3),void 0!==window.atdemo&&0<window.atdemo.length&&(console.log("~ Starting ATDemo"),runATDemo());
</script>