Search code examples
htmlcsshierarchy

How to fix incorrect display of the nested grouping symbol in the "details" tag?

If the top level is expanded, then all nested levels are assigned the "-" symbol, even if they are collapsed: jsfiddle.net/acces969/4eh6puvk/1/

<div class="treeHTML">Root
  <div>level 1
    <details><summary></summary>
      <div >level 2
        <details><summary></summary>
          <div >
            level 3
          </div>
        </details>
      </div>
    </details>
  </div>
</div>
Solution

  • Your CSS selector for the open details is slightly off:

    .treeHTML details[open] summary:before {/* styles */}

    This will select all summary elements which are children of an open details element, (including non-direct children)

    To only select only the direct child of the open details, you should use the > selector:

    .treeHTML details[open] > summary:before {/* styles */}