Search code examples
htmlcssfootnotes

In-line footnotes with only HTML/CSS (in-notes?)

Rather than below or alongside the main content, notes on FiveThirtyEight expand within or below the paragraph when the note tag is clicked. Instead of footnotes they could be called in-notes.

I find them very efficient and believe they take are the most web-suited note system I have seen. (Of course, I don't really want to fanboy Nate Silver like that.)

How do I code these in-notes?

I have looked around and I have seen some solutions using jquery or other languages, but it looks like 538 is only using HTML and CSS.

I believe I could probably finagle something with <details> but expect there is a better answer. I've looked at the source-code on 538 but I'm not sure which code is relevant.

Example article chosen because of its recency. Click the first footnote.

This is maybe a duplicate but in my ignorance I believe it is not.

EDIT: Elvislives answered that 538 indeed uses javascript. With my lack of knowledge of javascript, my question, I suppose, then becomes, Can I make inline notes with only HTML5?

Solution

  • An HTML/CSS-only solution using hidden checkboxes:

    HTML

    <p>
  This is my text. I make a claim that needs a citation.
  <input type="checkbox" id="cb1" /><label for="cb1"><sup>1</sup></label>
  <span><br><br> This is the citation.<br><br></span>
  Continued text.
</p>

    CSS

    input[type=checkbox] ~ span {display:none;}
input[type=checkbox]:checked ~ span {display:inline;}
input[type=checkbox] {display:none;}