D 2020-04-05T14:33:35.596
L branch/accordion-experiments
N text/x-markdown
U florian
W 2749
__Notes:__

* Simple plain text indicators hinting the status / available actions for the accordion may also work well, for example `[+]` and `[-]`, or `[open]` and `[close]`.

* Since the "Open" and "Close" icons are defined as CSS background images, they may not be visible by default on web pages printed to paper or PDF. The same applies to the ["Copy Hash" icon][tooltip-copyhash], and either could be changed to work with foreground `<img>` elements, if required.

* This raises the question whether the accordion should be "disabled" and "unfolded" on printing? Probably not, i.e. follow the principle to "print what's visible"? And technically it may be complicated to unfold the accordion on printing, i.e. override Javascript-modified styles with CSS print media query styles?

[tooltip-copyhash]: wiki?name=branch/tooltip-copyhash

__Uncompressed source code for the "Open" and "Close" icons:__

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M11,9H5V7h6v6z" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" width="32" height="32">
<path
  style="fill: black; opacity:0"
  d="M16,16H0V0h16v16z" />
<path
  style="fill:rgb(240,240,240)"
  d="M14,14H2V2h12v12z" />
<path
  style="fill:rgb(64,64,64)"
  d="M13,13H3V3h10v10z" />
<path
  style="fill:rgb(248,248,248)"
  d="M12,12H4V4h8v8z" />
<path
  style="fill:rgb(80,128,208)"
  d="M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z" />
</svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path
      style="fill: black; opacity:0"
      d="M16,16H0V0h16v16z" />
    <path
      style="fill:rgb(240,240,240)"
      d="M14,14H2V2h12v12z" />
    <path
      style="fill:rgb(64,64,64)"
      d="M13,13H3V3h10v10z" />
    <path
      style="fill:rgb(248,248,248)"
      d="M12,12H4V4h8v8z" />
    <path
      style="fill:rgb(80,128,208)"
      d="M11,9H5V7h6v6z" />
    </svg>

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
    <path
      style="fill: black; opacity:0"
      d="M16,16H0V0h16v16z" />
    <path
      style="fill:rgb(240,240,240)"
      d="M14,14H2V2h12v12z" />
    <path
      style="fill:rgb(64,64,64)"
      d="M13,13H3V3h10v10z" />
    <path
      style="fill:rgb(248,248,248)"
      d="M12,12H4V4h8v8z" />
    <path
      style="fill:rgb(80,128,208)"
      d="M5,7h2v-2h2v2h2v2h-2v2h-2v-2h-2z" />
    </svg>
Z 70d8fcb1e4e9caa9f66075af2b4c8994