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

Responsive center alignment of stacked `<div>` elements using CSS

My goal is to center a stack of divs in 3 columns per row if the browser window is wider than 1024px, and switch to 2 columns per row if it's smaller, while still displaying all 6 divs. Unfortunately, I'm facing difficulties trying to apply what ...

css

Hide the border on a table with CSS

I recently installed a Wordpress Template and customized the table's background and text colors. However, I am struggling to remove the border around the table. Despite searching for solutions, my limited CSS knowledge has not led me to a fix that wor ...

htmlcsswordpress

Tips for achieving a unique look with CSS: Transforming border radius colors in four distinct sections

Is it possible to create a gradient border with multiple colors using border radius? div { border-radius: 30px; width: 60px; height: 60px; border: 1px red solid } Hello <div> </div> I am looking to achieve a unique effect on my bord ...

cssborder

Need help altering the CSS style of a button once the mouse is released from the :active pseudo class? Look no further!

Is it possible to change the style of an element, such as a button, immediately after the :active pseudo-class is triggered? I noticed that on "Facebook" in their "Sign Up" button, when you click on it and release your mouse, the button background turns ...

cssbuttonmouseevent

Exploring the utilization of server-side Web Sockets functionality

Recently, I've been diving into the world of Web Sockets and I'm eager to understand how server-side implementation works. While I feel comfortable with writing client-side code using onmessage() in HTML5, JavaScript, etc., I find myself unsure a ...

htmlwebsocketnpm

inconsistencies observed in flex layout between webkit browsers (Chrome and Safari) compared to moz (Firefox)

I am experiencing unexpected behavior with flex on Mozilla (-moz-) and Chrome/Safari (-webkit-) Referenced the Mozilla tutorial to understand flex layout /** { border: solid; border-width: 0 1px; }*/ html, body { width: 100%; height: 1 ...

htmlcsswebkitflexboxmozilla

What is the best way to implement the concept of setting a minimum size for a scrollable element based on its content and a

In the interest of simplicity, let's assume that my fixed height is 100px. So, the CSS expression for the question in the title would be: height: min(min-content, 100px); This means to take the minimum value between content height and 100px. Unfortun ...

htmlcsssizing

CSS - ensure that two elements with display: table-row stay stacked on top of one another

I came across this HTML structure .table { display: table; } .row { display: table-row; } .cell { display: table-cell; text-align: center; padding: 5px; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; } .sticky { positi ...

htmlcsssticky

Prevent Cross-Site Scripting attacks in Laravel by sanitizing user input, even when allowing HTML tags

What measures can be taken to protect against XSS attacks when a user is allowed to use HTML tags, such as in a textarea element? Avoiding the stripping or escaping of all tags complicates the situation and rules out the option of using {{ }}. It's a ...

javascriptphphtmllaravelxss

Tips for creating a hover-activated dropdown menu

How can I create a drop-down menu in my horizontal navigation bar that appears when hovering over the Columns tab? The drop-down menu should include options such as Articles, Videos, Interview, and Fashion. To better illustrate what I am looking for, here ...

javascripthtmlcss

How do I customize the border color for the Select component in Material UI?

I have been working on customizing the Select component provided by Material UI. Here is a visual representation of what it currently looks like: https://i.stack.imgur.com/YGheB.png My goal is to change the border-color of the select component from the ...

cssreactjsmaterial-ui

Using jQuery to automatically scroll to the bottom of a div when sliding down

When a user clicks on a link to slide the div down, I want it to automatically scroll to the bottom of the div. I've attempted to use scrollTo and animate methods to achieve this effect. $('html, body').animate({ scrollTop: $("#elementID") ...

javascriptjqueryhtmlcss

Tips for extracting text from a multiline tag using Selenium

I need help extracting the text "1 file has been successfully uploaded" from the code snippet below: <div class="formbuttons"> <h3 id="res" class="demo" style="color: rgb(255, 255, 255); display: block;"> <center>1 file <br>has bee ...

javahtmlseleniumxpathselenium-webdriver

Steps for creating a one-sided container in CSS

I've created a container class with the following CSS: .container { margin: 0 auto; width: min(90%, 70.5rem); } This setup centers the content on the page within the container, which is great for organization. However, I'm looking to creat ...

htmlcss

Ways to streamline repetitive CSS rules within media queries

As I work on defining multiple media queries, I realize there is some redundant code within them: @media only screen and (max-width:768px), only screen and (min-width:769px) and (max-width:1040px) { .list__figure { margin-right: 20px; ...

cssmedia-queries

What advantages does including @charset "ISO-8859-15"; at the top of a CSS file provide?

Why would adding @charset "ISO-8859-15"; or @charset "utf-8"; at the beginning of a CSS file be advantageous? ...

cssunicode

The art of replacing material-ui styles with styled components

As a newcomer to UI material design, I am eager to create my own customized Button Component using styled-components. I am facing a challenge in overriding the CSS based on different button variations such as "primary" or "secondary". You can find my cod ...

javascriptcssreactjsmaterial-uistyled-components

What is the best way to incorporate multiple input boxes into a single alertbox for repeated use?

I attempted to use the same alertbox for 3 different input elements by converting it into a class and using getElementsByClassName, but unfortunately, it did not work as expected. Here is what I tried: <input type="text" class="form-control date notif" ...

javascriptphphtml

Utilizing PHP and AJAX to Extract Information from a MySQL Database

My goal is to fetch data from a MySQL database hosted on a webserver and display it in an HTML table. I've been following an example on W3Schools, but I'm facing issues retrieving the data successfully. Here is the source code: (HTML) <html& ...

javascriptphphtmlmysqlajax

How do I go about transferring a file using PHP?

I'm working on file uploads and saving them in a directory. However, I'm facing an issue: when a file is denied it needs to be deleted from the directory. This part is sorted out. But what if the file is approved? Should I use rename() or move_up ...

phphtml