Create Footnotes And Show Them All In One Clean List – FootNotes.JS

Preview:

Description:

Footnotes are often used to give supporting material or credit to a reference and they are also used to annotate texts with mini-essays that contain additional information. Such annotations or notes can provide extra details, examples, definitions, and arguments related to the topic of the text. A footnote could be used for references in scientific papers for instance.

In this article, we’re going to use the FootNotes.JS JS plugin to easily add footnotes to your article and also the full footnote text to the bottom of the article in an ordered list with a corresponding number.

How to use it:

1. Load the stylesheet FootNotes.css and JavaScript FootNotes.js in the document.

<link rel="stylesheet" href="FootNotes.css" />
<script src="FootNotes.js"></script>

2. Add footnotes to the target words/terms/sentences within your document as follows:

<p>jQuery is a fast, small, and feature-rich JavaScript 
   <span class="tooltip-link"><sup></sup>
   </span>
   <span class="tooltip-hide toolTip increment">
    <b></b> 
    <a href="">JavaScript Footnote</a>
    <span class="closeTooltip">x</span>
  </span> library. It makes things like HTML
  <span class="tooltip-link"><sup></sup>
  </span>
  <span class="tooltip-hide toolTip increment">
    <b></b> 
    <a href="">HTML Footnote</a>
    <span class="closeTooltip">x</span>
  </span>
  document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
</p>

3. Add the footnotes to the bottom of the article if needed.

<div style="margin-bottom: 25px;">
  <span class="spoiler-name">Show Footnotes</span>
</div>
<ol id="spoiler" class="spoilerHidden">
  <li id="note1"></li>
  <li id="note2"></li>
  <li id="note3"></li>
  ...
</ol>