gistfile1.js

// Page 3

document.addEventListener('DOMContentLoaded', function init() {

	var testD = document.querySelector('#testDetails');
	var summary = testD.querySelector('summary');

	summary.addEventListener('click', function () {
		var open = !testD.hasAttribute('open');
		console.log(open);
	}, false);	

});


// Page 4

$(function () {
	
	var testD = $('#testDetails');
	var summary = $('summary', testD);

	summary.on('click', function () {
		var open = !testD.attr('open');
		var loaded = testD.data('loaded');
		var url;

		if (open && !loaded) {
			testD.data('loaded', true);
			url = testD.data('details');
			$.get(url).then(function (res) {
				$(summary).after(res);
			});
		}
	});
	
});

Improvements in Page 3 code:

1. Variables "testD" and "init" no longer leak into the global namespace (guards against potential name collisions)
2. The second querySelector call is no longer global (global queries take more time, so we minimize their use)

Improvements in Page 4 code:

1. Again, removed global variables (I've used a data-loaded attribute instead of a dedicated variable.)
2. $(fn) instead of the deprecated $(document).ready(fn)
3. "var that = this" removed. Instead I access reference via a variable. (We're querying the

element anyways.)

testing gist notifications, but everything is wrong in this 2013 gist anyway :D (take this with hirony)

• tabs are disturbing
• addEventListener('DOMContentLoaded', ...) works too, no need to use document
• the global selector, since there is an ID involved, is a bit LOL, 'cause any ID is reflected in the window object, so that testDetails would be already available
• jQuery is disturbing in 2019