footnote-preview.js

// Footnote previews for markdown by David Yates
// See an example here:
// https://davidyat.es/2020/12/31/footnote-previews/
//
// License: MIT

// set previewSide to specify an additional class for footnote previews

refs = document.querySelectorAll("[id^=fnref]");
activeBox = null;

refs.forEach(function (r){
  var fnlink = r.getElementsByTagName("a")[0]
  var fnid = fnlink.href.split("#")[1];
  var num = fnid.split(":")[1]
  var fn = document.getElementById(fnid);

  fnlink.href = "javascript:void(0)";

  r.innerHTML += '<div id="fnbox:'+num+'" class="footnote-preview '+ previewSide +'" style="display: none;">'+fn.innerHTML+'</div>'; 
	var box = document.getElementById("fnbox:"+num);
  r.addEventListener("click", function(event) {
    if (box.style.display == "none") {
      if (activeBox) activeBox.style.display = "none";
        box.style.display = "block";
        activeBox = box;
      }
      else {
        box.style.display = "none";
    }
  });
});