<p>The [note] sign is historically equal to the asterisks used by Aristarchus of Samothrace at the Mouseion at Alexandria. It was used for the critical editions of Homer's writings where it "marked a verse incorrectly repeated in another passage" and was used together with other signs such as the obelus.<a class="annotation-link" href="#"><sup>1</sup></a>

  <span class="annotation">
   <a href="#">L.D. Reynolds and N.G. Wilson</a>. <i>Scribes and Scholars: A guide to the Transmission of Greek and Latin Literature</i>. Oxford University Press, 1991, 3rd edition, ISBN 0-19-872146-3, p. 10-11
  </span>

The London printer Richard Jugge is generally credited as the inventor of the footnote, first used in the Bishops' Bible of 1568.<a class="annotation-link" href="#"><sup>2</sup></a>

  <span class="annotation">
    Chuck Zerby, <i><a href="#">The Devil's Details: A History of Footnotes</a></i>, 2007, ISBN 1931229058, p. 28 and <i>passim</i>
  </span>
</p>

<p>Early printings of the Douay Bible used two closely spaced colons (actually squared four dot punctuation mark U+2E2C) to indicate a marginal note. (Source: <a href="https://en.wikipedia.org/wiki/Note_(typography)">Wikipedia</a>)</p>
// Styling only
body { 
  font: 1.1rem/130% sans-serif;
  line-height: 160%;
  padding: 3rem;
}

sup { 
  line-height: 1; 
  margin: 0 2px;
}

.annotation {
  color: grey;
  cursor: default;
  display: block;
  font-family: sans-serif;
  font-size: 0.9rem;
  padding: 0.5rem 0;
}

// Functional classes
.annotation-link-selected { 
  sup { 
    opacity: 0; 
  }
  
  &:after {
    content: "x";
    display: inline-block;
    margin: -7px 0 0 -9px;
    opacity: 1;
    vertical-align: top;
  }
}

// Uses the max-height hack: http://bit.ly/2mpGSwW
.annotation { 
  display: none;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transition: 
    max-height .3s ease-out 0s,
    width .01s ease-out .3s,
    opacity .2s ease-out 0s;
  width: 0;
}

.annotation-expanded {
  max-height: 5000px;
  width: 100%;
  opacity: 1;
  transition: 
    max-height .5s ease-in .01s,
    width .01s ease-in 0s,
    opacity .2s ease-in-out .21s;
}

.annotation-displayed { display: block; }
View Compiled 
// helper
const selectAll = (selector, root = document) => {
  return Array.prototype.slice.call(root.querySelectorAll(selector), 0)
}

// select annotations and annotation links
const annotationLinks = selectAll('.annotation-link')
const annotations = selectAll('.annotation')

const toggleAnnotation = ({ currentTarget: el }) => {
  const annotationLinkId = el.dataset.id
  const isSelected = el.classList.contains('annotation-link-selected')
  const annotationContainer = document.querySelector(`.annotation[data-id="${annotationLinkId}"]`)
  
  el.classList.toggle('annotation-link-selected')

  if (isSelected) {
    annotationContainer.classList.toggle('annotation-expanded')
    setTimeout(() => { annotationContainer.classList.toggle('annotation-displayed') }, 300)
  } else {
    annotationContainer.classList.toggle('annotation-displayed')
    setTimeout(() => { annotationContainer.classList.toggle('annotation-expanded') }, 300)
  }
}

const closeAnnotation = ({ currentTarget: el }) => {

  // https://developer.mozilla.org/en-US/docs/Web/API/Window/getSelection  
  if (window.getSelection().type === "Range") { return }
  
  const annotationContainerId = el.dataset.id
  const annotationLink = document.querySelector(`.annotation-link[data-id="${annotationContainerId}"]`)
  
  annotationLink.classList.remove('annotation-link-selected')
  
  el.classList.toggle('annotation-expanded')
  setTimeout(() => { el.classList.toggle('annotation-displayed') }, 300)
}

// Loop through all annotation links
annotationLinks.forEach((el, index) => {
  // Adds matching data ids to annotations and containers
  el.setAttribute('data-id', index + 1)

  // Clicking an annotation link expands/collapses the annotation
  el.addEventListener('click', toggleAnnotation)
})

// Loop through all annotations
annotations.forEach((el, index) => {
  // Adds matching data ids to annotations and containers
  el.setAttribute('data-id', index + 1)

  // Clicking the content of an annotation collapses it, too
  el.addEventListener('click', closeAnnotation)

  // Prevent annotation from hiding if link in annotation is clicked
  el.querySelector('a').addEventListener('click', e => e.stopPropagation())  
})
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.