Here’s a method for inserting an html \<details\> tag into markdown. It allows markdown syntax inside the summary and the body of a \<details\> tag. This works with Jekyll’s Kramdown dialect of markdown, served by GitHub Pages.

SUMMARY

DETAILS

There’s also template/tag/style code for inserting a tooltipThis is a tooltip.

Contents

Details tag

Details markdown template

Copy and paste these four lines into your markdown document.

{% capture details %}
DETAILS
{% endcapture %}
{% capture summary %}SUMMARY{% endcapture %}{% include details.html %}

Replace DETAILS and SUMMARY with your content.

Alternative:

<details markdown=block>
<summary markdown=span>A *Summary*</summary>
These are the **details** for this item.
</details>

See also Jekyll accordion.

Details include file

The last line of the template references a file: _includes/details.html. Create a file with this code and put it in your _includes folder.

<details>
    <summary>{{ summary | markdownify | remove: '<p>' | remove: '</p>' }}</summary>
    {{ details | markdownify }}
</details>

Details style

Example css styles for the details tag, saved in /assets/main.scss.

//
// <details> tag
//
$grey-color:         #757575;
$grey-color-darkish: darken($grey-color, 15%);
$brand-color:        #2a7ae2;
$details-background-color: #dbdbdb;

details {
    border-radius: 10px;
    padding: 0px 8px;
    margin-bottom: 15px;
}
details[open] {
    background: $details-background-color;
    padding: 0px 8px 8px 8px;
}
summary {
    margin: 0px 0px 8px 0px;
    outline:none;
}
details summary {
    color: $brand-color;
}

Details examples

Markdown syntax, equations, and images inside details tag

show the answer

$\text R_\text T = \text R_\text N = 500\,\Omega$

$\text V_{\text T} = \text V_{\text T} \, \text R_{\text N} = 0.002 \cdot 500 = 1\,\text V$

Resistor and voltage source schematic

Nested details tags

Outer details tag

This is information in the outer details tag.

Inner details tag

And even more inside an inner details tag.

The markdown source file for this article is in _articles/details.md.

Tooltip

Here are examples of tooltips created in markdown,

Leading text — tooltip anchortooltip with text — trailing text.

Leading text — tool tip anchor Superposition sub-circuits.
tooltip with image — trailing text.

At this point it is possible to express $r$ in terms of $x$ Line of charge with a test charge to the side.

Tooltip markdown template

To create a text tooltip, copy and paste this template into your markdown source,

LEADING TEXT <span class="tooltip">ANCHOR TEXT<span class="tooltipcontent">TOOLTIP TEXT</span></span> TRAILING TEXT.

For a tool tip with an image, use this template,

LEADING TEXT <span class="tooltip">ANCHOR TEXT <span class="tooltipcontent"><img src="/i/rc_step_superposition_natural.svg" alt="ALT TEXT" /></span></span> TRAILING TEXT

Tooltip style

The styling for the tool tip is in /assets/main.scss,

///
/// Tool Tip, from https://www.w3schools.com/css/css_tooltip.asp
///
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dashed #ccc; /* dots under the anchor text */
}

/* Tooltip content */
.tooltip .tooltipcontent {
  visibility: hidden;
  width: 400px;
  background: var(--details-background-color);
  text-align: center;
  padding: 5px 0;
  border-radius: 4px; 
  /* Position the tooltip content */
  position: absolute;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;
}

/* Show the tooltip content when you mouse over the tooltip anchor text */
.tooltip:hover .tooltipcontent {
  visibility: visible;
}

Append {:target="_blank"} to the link specification.

Example: spinning numbers

Code:

[spinning numbers](https://spinningnumbers.org){:target="_blank"}