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?

回答1:

538 is using javascript for the footnote show/hide functionality. The footnote text has css display:none on pageload and when the footnote is clicked the javascript changes the css to display:block on the footnote.

Here is a jsbin example: http://jsbin.com/vewibexedu/edit?html,css,js,output

Edit: In response to your edit request for how to do this with only html/css, you can use css focus to toggle display block and display none. The footnote close functionality would be a little tricker with css only than it would be with js. I've implemented an example here where the close button is at the end of the footnote as opposed to replacing the footnote number like 538 does - this is one css-only workaround. http://jsbin.com/cexeyegodo/edit?html,css,output

回答2:

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;}

来源：https://stackoverflow.com/questions/40336366/in-line-footnotes-with-only-html-css-in-notes

标签

html

css

footnotes