Hide another element when details[open]

May 19, 2022

I have a standard

<details>
<summary>
Text
</summary>
</details>

and a <div class="something"> elsewhere on the same page (outside the details altogether). How to hide the div when details[open], for example by setting .something {display: none;}?

I tried

details[open] > .something {
  display: none;
}

with and without the >, but it doesn’t do anything.

I’m open to JS as well, but I’d expect this to work in css.

>Solution :

You can use the sibling operator. But please not that the CSS cannot traverse up or reverse.

details[open] ~ .nested .something,
details[open] + .something {
  display: none;
}

<details>
  <summary>Details</summary>
  Something small enough to escape casual notice.
</details>
<div class="something">Something something, open details.</div>
<div class="nested">
  <p>Let's try to target the below too.</p>
  <p class="something">You won't see this if details is open.</p>
</div>

TBH, this kinda explains it: