inline "footnotes" for iBooks

The dictionary feature in iBooks and the Kindle app, where tapping a word immediately brings up a definition and another tap dismisses it, is so useful and appealing it inspires attempts to do something similar for footnotes, citations, references, etc.

Here's a javascript technique whereby tapping on a paragraph will overlay the paragraph temporarily with a prepared inline note, with a second tap restoring the original paragraph. 

XHTML:

<p onclick="popoutwhite(this)"><span class="inlinenote">some text for the note</span>some text for the paragraph</p>

CSS:

span.inlinenote {

display: block;

color: white;

height: 0; /* default overflow is "visible", but 'invisible' since white */

}

javascript:

function popoutwhite(obj) { //colorless <p> text disappears; white <span> text shows up against a gray background. 

switch(obj.style.background) {

case "": {obj.style.background = "gray";}

break;

default: {obj.style.background = "";}

};

switch(obj.style.color) {

case "": {obj.style.color = "transparent";}

break;

default: {obj.style.color = "";}

};

The idea is to make the originally invisible note - white on a white background - become visible by adjusting the background in two ways: first by setting the background to gray and paragraph color to transparent so it doesn't interfere.

Notes: 

This works in both iBooks and Sigil. Also the Kobo app for iOS.

The inline text must be shorter than the paragraph; otherwise it will be clipped.

The reader could be alerted to such paragraphs by a special border, or some other means.

Could be useful with question and answer sets.

Only inline style attributes are accessible with this technique; not important in this case, but in other examples.

The "this" keyword simplifies the coding and lets the function be called from any paragraph.

Comments welcome!