Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective. That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule, making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
Remember, you'll have to always start your CSS rules from the "`.menu-wrap` class `<div>`" to look into for a match when the "`#link1 <input>`" is `checked`, and then go on to the "`.content-wrap` class `<div>`" to look at for the "`#link1-content <input>`", 'cause those are the elements at the right level of the DOM tree from where you can "move back and forth" for the matching in the case here.
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
.menu-wrap:has(#link1:checked) ~ .content-wrap #link1-content { display: none;}
<!-- language: lang-html -->
<div class="wrapper"> <div class="menu-wrap"> <ul> <li> <input type="radio" id="link1" /> </li> </ul> </div>
<div class="content-wrap"> <div id="link1-content"><p>Just a paragraph</p></div> </div> </div>
<!-- end snippet -->
So here the needed CSS rule is:
.menu-wrap:has(#link1:checked) ~ .content-wrap #link1-content { display: none;}
P.S. Just let me note that maybe an `<input>` of type `checkbox` would make more sense than a `radio` one here IMHO...

Being on an summer break, I thought it could be nice to revive some very old questions answering to something with a today perspective. That's the case here:
In a similar situation, nowadays, you can obtain what you need without using javascript and leaving the html structure in your document just as it is by simply adding a new CSS rule, making use of the [`:has()` relational pseudo-class](https://developer.mozilla.org/en-US/docs/Web/CSS/:has) which is being supported by all major browsers since the end of 2023 at least ([see](https://caniuse.com/css-has)).
<!-- begin snippet: js hide: false console: true babel: false babelPresetReact: false babelPresetTS: false -->
<!-- language: lang-css -->
.e ~ .f, .e:has( ~ .f) { color:red; }
<!-- language: lang-html -->
<div> <div class="e">class e div</div> <div class="f">class f div</div> </div>
<div> <div class="e">class e div</div> </div> <div> <div class="f">class f div</div> </div>
<!-- end snippet -->
So here the needed CSS rule is:
.e ~ .f, .e:has( ~ .f) { color:red; }
That's it, simple like that and very easy (...today!)
P.S. Just a final note here: if you happen to have inverted order divs, so that "`.f` class divs" comes before "`.e` class" ones, and you still want the CSS rule to be applied also in that situation, then it is needed to also add `.f ~ .e, .f:has( ~ .e)` selectors on CSS rule, so that the final CSS declaration would be:
.e ~ .f, .e:has( ~ .f), .f ~ .e, .f:has( ~ .e) { color:red; }