Footnotes integrated directly into the text using only HTML and CSS (in-line notations?)

Instead of appearing below or alongside the main content, notes on FiveThirtyEight expand within or below the paragraph when the note tag is clicked. They could be referred to as "in-notes" instead of footnotes.

I personally find this system very efficient and believe it is the most suitable note system for the web that I have encountered. (Although I must admit, I don't want to be seen as a devoted fan of Nate Silver.)

How can I implement these in-notes?

I have searched around and found some solutions using jquery or other languages, but it seems like 538 only uses HTML and CSS.

I think I could possibly create something similar with <details>, but I suspect there may be a better solution out there. I've checked the source code on 538, but I'm unsure which part is relevant.

Here's an example article chosen for its recent publication date. Click on the first footnote to see the in-note feature.

This link might appear to cover the same topic, but based on my lack of knowledge, I believe it doesn't address my specific question.

UPDATE: According to Elvislives, it appears that 538 does use javascript for this feature. With my limited understanding of javascript, my question now shifts to, Is it possible to create inline notes using only HTML5?

htmlcssfootnotes

Answer №1

538 website utilizes javascript to toggle the visibility of footnotes. Initially, the footnote text is hidden with CSS display:none, and when clicked, the javascript code changes it to display:block.

For a demonstration, you can view this jsbin example: http://jsbin.com/vewibexedu/edit?html,css,js,output

If you prefer a solution using only HTML/CSS, you can achieve similar functionality by utilizing CSS focus to toggle between display block and none. However, implementing a close button for the footnotes solely with CSS might be more complicated compared to using JavaScript. Here is an example where the close button is located at the end of the footnote rather than replacing the footnote number like 538 does - this serves as a CSS-only workaround. http://jsbin.com/cexeyegodo/edit?html,css,output

Answer №2

A clever solution using hidden checkboxes in HTML and CSS:

HTML

<p>
  Here is some text that requires a citation.
  <input type="checkbox" id="cb1" /><label for="cb1"><sup>1</sup></label>
  <span><br><br> This is where the citation goes.<br><br></span>
  More text follows.
</p>

CSS

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

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

HTML5 sortable lists, ajax posting, and inactive elements are not functioning correctly

I'm currently utilizing a fantastic plugin for jQuery known as HTML5 Sortable. It can be found at . I am attempting to disable certain items using this plugin. My approach involves adding the class="disabled" to the <li> tag and including items ...

jqueryajaxhtmljquery-ui-sortable

How to hide text within a contenteditable element

I'm trying to create a contenteditable span that behaves like a password field in a Linux terminal; the text is entered, but not visible. I've experimented with different CSS properties like visibility: hidden and display: none, but they don&apos ...

htmlcss

Issues with the functionality of the bootstrap modal jQuery function in Firefox, causing problems with scrollbars and dynamic modal height adjustments

My newly launched website is built using bootstrap v3 and modals to showcase detailed information about each game server that is queried. Each modal provides insights into the current players on the server, their score, and play time. While implementing ...

jquerycsstwitter-bootstrap-3bootstrap-modal

Hover effect triggered upon mouse exit

As I delve into learning the basics of HTML and CSS, I came across the :hover property in CSS. This unique feature allows for a specific action to occur when the cursor hovers over an element, based on the code provided. Additionally, I discovered the tran ...

htmlcsshover

Conceal the iframe if the source is http:// and there is no associated

Is there a way to hide the iframe only if the src starts with "http://"? This is what I have tried so far: <script type="text/javascript> if ( $('iframe[src^="http://"]') ) document.getElementById('iframe').style.d ...

javascriptjqueryhtmliframe

Initiating the ngOnInit lifecycle hook in child components within Angular

I am facing an issue with controlling the behavior of child components in my Angular application. The problem arises when switching between different labels, causing the ngOnInit lifecycle hook of the children components not to trigger. The main component ...

htmlangulartypescriptangular-material

"Utilizing jQuery and AJAX to manage identical-named option boxes with

I am encountering an issue with multiple select boxes that share the same name. Currently, when I choose a value from one select box, it submits that selection and updates the database. However, when I select an item from another select box, it still submi ...

javascriptphpjqueryhtmlajax

Tips for effectively utilizing CSS classes with current-device

Attempting to lock the screen orientation in portrait mode for mobile and iPad devices using a CSS snippet found on css-tricks.com. @media screen and (min-width: 320px) and (max-width: 767px) and (orientation: landscape) { html { transform: rotate ...

javascripthtmlcssscreen-orientation

Slider with a progress bar

Have you ever wondered if it's possible to create a progress bar using an input range? Imagine someone entering a number and the bar moves to the right, changing its background color on the left side of the thumb based on the size of the number. Check ...

javascriptcssangularjshtml

Unique rephrased text: "Varied wrapping styles in both

Feeling frustrated with a seemingly commonplace issue. Despite the thousands of times it has been asked before, I can't seem to find an answer on Google. I wanted to neatly display my text within one of my cards, but so far I've only achieved th ...

javascriptcssreactjstextmaterial-ui

"Error: The function $(...).autocomplete is not recognized" in conjunction with Oracle Apex

Currently experiencing some frustration trying to solve the issue at hand. The Uncaught TypeError: $(...).autocomplete is not a function error keeps popping up and I have exhausted all resources on Stack Overflow in an attempt to fix it. This problem is oc ...

javascriptjqueryhtmljquery-uioracle-apex

Comparing User Inputs to Database Entries in PHP and MySQL: A Guide

I am currently working on an HTML form that includes a textbox for the user to enter their username and a login button. I want the database to be queried when the user clicks the login button and if there is a match, I would like to echo out a statement. T ...

phphtmlmysql

How to use plain JavaScript to extract the value from a textarea in GWT

Situation: I am currently developing a tampermonkey script to enhance certain GWT pages within a third-party application. Unfortunately, I do not have access to the source code or servers. Challenge: My task is to retrieve the value of a textarea element ...

javascripthtmlgwttampermonkey

Combining Bootstrap navbar with React Router for seamless navigation

I am new to using React and I am having trouble linking pages with Bootstrap navigation. I am attempting to use React Router DOM to navigate to different pages on click, but the app is not compiling because BrowserRouter is not being imported properly. I c ...

htmlcssreactjs

Creating a vertical gradient that repeats horizontally using CSS

Looking for a creative solution using only CSS to achieve a specific background pattern. I envision a gradient that stretches horizontally and repeats vertically with gaps in between each repetition. Here's an example: (source: howsfamily.net) W ...

cssgradient

loading xml data into a table partially using jquery

Currently, I am utilizing AJAX to load and parse XML data. I have constructed a table where I am inserting the data from the XML using a loop. The issue lies in the fact that only around 3000 rows are being inserted into the table even though the XML conta ...

javascriptjqueryxmlajaxhtml

Having trouble bringing in icons from the @mui/icons-material library

An error occurs when attempting to run the code. wait - compiling... error - ../../../../../node_modules/@mui/icons-material/esm/utils/createSvgIcon.js:1:0 Module not found: Can't resolve '@mui/material/utils' null Note: @mui/material pack ...

javascriptcssreactjsmaterial-uinext.js

Is there a way to change a class on an anchor element without disrupting its functionality?

The code snippet provided includes an anchor tag with classes for "window" and "less" applied. Is there a way to eliminate the anchor tag while still keeping the classes intact in the code, ensuring that the functionality remains unchanged? ...

htmlcssanchor

The color of the progress bar in JS is not displaying properly

My work involves using jQuery to manipulate progress bars. The issue I am facing is defining standard colors that should be displayed on the progress bar based on the value received. Here is my code: var defaultSegmentColors = ['#FF6363', &ap ...

javascripthtmlcss

How to Align the Button Vertically with the TextField in React Material-UI

Utilizing the Material-UI library for React, I have been working on creating a simple form with the following design: https://i.stack.imgur.com/LY3ZN.png My challenge lies in aligning the button with the TextField element. Adjusting the margin-top proper ...

cssreactjsmaterial-ui