Missing chevron in <details><summary>

Help
1

I generated a few hundred <details><summary> html commands for blog post tags. For some reason the chevron (triangle indicating expanded / collapsed) isn’t appearing:

GIF illustrating problem

pippim post tags details chevron

Relevant HTML

There is really nothing special about the <html> which my python program generated:

(... SNIPPED ...)
TAGS: keyboard TO: keyboard (18)<br>
TAGS: keyboard-backlight TO: kvm-switch (16)<br>
</p></details>

<details><summary>TAG: l (139)</summary><p>
TAGS: lamp TO: lan (3)<br>
TAGS: laptop TO: latex (17)<br>
TAGS: launcher TO: libreoffice-basic (19)<br>
TAGS: lid TO: list (19)<br>
TAGS: live-cd TO: locate (14)<br>
TAGS: lock-screen TO: lockup (17)<br>
TAGS: log TO: logging (7)<br>
TAGS: login TO: logout (19)<br>
TAGS: logs TO: lts (17)<br>
TAGS: lubuntu TO: luks (7)<br>
</p></details>

<details><summary>TAGS: m TO: o (269)</summary><p>
TAGS: maas TO: matlab (17)<br>
TAGS: mbr TO: moderators (18)<br>
TAGS: monitor TO: monitoring (15)<br>
(... SNIPPED ...)

I just noticed the bug where it’s not leveling ~15 blog posts per tag group. EG first group 3, second group 17, etc. I will fix that :slight_smile:

I wonder if I need a new-line between </summary> and <p>. It used to take 20 to 30 seconds to rebuild on G-H Pages. After adding this trial html of only 300 detail summary lines (out of 4000 in the end) it is now taking 10 minutes! Randomly trying different experiments is no longer as practical as before.

Invoking HTML with Liquid

The html is stored in _includes/posts_by_tag.html and is invoked with:

{% include posts_by_tag.html %}

CSS Used for styling

I guess I could add the chevron to the css currently used for styling:

// Details syling: https://developer.mozilla.org/

details {
  font: 16px "Open Sans", Calibri, sans-serif;
  width: 620px;
}

details > summary {
  margin-top: 10px;        // some spacing between groups
  padding: 2px 6px;
  width: 15em;
  background-color: #ddd;
  border: none;
  box-shadow: 3px 3px 4px black;
  cursor: pointer;
}

details > p {
  border-radius: 0 0 10px 10px;
  background-color: #ddd;
  padding: 2px 6px;
  margin-left: 2em;
  // margin: 0;
  box-shadow: 3px 3px 4px black;
}

details[open] > summary {
  background-color: $honeydew;
  color: $header-bg-color;
}

<details> Work on this website

On this website if you use the following HTML:

<details><summary>You can click this</summary>And see the chevron change</details>

The code renders properly showing the chevron:

You can click thisAnd see the chevron change

Environment

I’m using current GitHub Pages remotely with no local setup.

Any ideas?

2

Well I fixed it without understanding why it was broken in the first place :frowning:

I just added a bit more to the existing css:


details > summary {
  // Chevron from https://stackoverflow.com/a/10813665/6929343
  list-style-type: none;

 (... Existing code from above question SNIPPED ...)

}

details > summary::-webkit-details-marker {
    display: none;
}

details > summary::before {
    content: '▶️ ';
}

details[open] > summary::before {
    content: '🔽 ';
}

I found the solution in Stack Overflow and a bonus is have a little color in the chevrons.