0

The possibility exists to replace the replace the expand macro of the <details> element, this is described in e.g. Can I replace the expand icon (▶) of the <details> element? and the answer https://stackoverflow.com/a/10813665/1657886

Normally the <details> element will have a <summary> in it and all works fine, but when the <summary> element is missing the browser will fall back to the default text "Details" and the default icon.

CSS code working in case there is a <summary> element present:

details>summary {
  list-style-type: none;
}

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

details>summary::before {
    content: "\25ba";
    padding-right:4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right:4px;
    font-size: 80%;
}

The question is how to set the icon in case the <summary> element is missing?

Edit Full example (file name: aa.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/xhtml;charset=UTF-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=11"/>
<title>My Project</title>
<style>
details>summary {
  list-style-type: none;
}

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

details>summary::before {
    content: "\25ba";
    padding-right:4px;
    font-size: 80%;
}

details[open]>summary::before {
    content: "\25bc";
    padding-right:4px;
    font-size: 80%;
}
</style>
</head>
<body>
  <details >
    <summary> The summary 1</summary> The details 1
  </details>
  <details >
    The details no own summary
  </details>
</body>
</html>
albert
  • 8,285
  • 3
  • 19
  • 32

1 Answers1

2

details {
  position: relative;
}


/* details>summary {
  list-style-type: none;
}

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

details::before,
details[open]::before {
  display: inline-block;
  transform: translate(2px, 1px);
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  font-weight: 900;
}

details::after,
details[open]::after {
  display: inline-block;
  transform: translate(-3px, -2px);
  position: absolute;
  content: "";
  width: 15px;
  height: 22px;
  background: #fff;
  top: 0;
  left: 0;
}

details::before {
  content: "\002b";
}

details[open]::before {
  content: "\002d";
}
<details>
  <!-- <summary>Click to expand</summary> -->
  With some example text shown when expanded.
</details>

Since there is no way to grab the disclosure widget once you remove the summary element (or at least I couldn't find one), so the solution has to be a bit hacky.

first
  • 616
  • 1
  • 7
  • 13
  • Thanks for the answer, though in case one clicks on the opened details section on the arrow it doesn't react and it only reacts when clicking here on the text (In the closed situation both the arrow and text, as desired, work). In the closed situation it also looks like it doesn't replace the icon (at least not in my test situation, just try it with a `+` and a `-` so it is more obvious). – albert Oct 02 '22 at 08:55
  • Hi I have updated my answer for the icons, will have to do some work to get them clicking.. – first Oct 02 '22 at 10:09
  • The `-` sign is in this case positioned a bit low. Further I don't see any difference (OK the weight is `font-weight` has been increased (I just set the font-size to a large value will do a similar trick. but this is only for debuging / checking wheter or not it is working) – albert Oct 02 '22 at 11:07