Hide another element when details[open]

Issue

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:

Answered By - Praveen Kumar Purushothaman