Show and hide content with link or anchor

Question

Been looking for an easy-to-use CSS only solution to show content on target from a link to an anchor on another page, and at the same time hide the rest of the content on the very same page.

Stumbled upon this old post: CSS - show / hide content with anchor name

Where the second answer:

<a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

Kind of solved my problem. However I only get the firstWindow to show - where the other links: secondWindow and thirdWindow only show the firstWindow content.

I bet there's a easy solution to my problem. Greatly appreciate some help. Thanks in advance.

Answer 1

Thought to give this as a comment, but would be hard to read. Its a DRY improvement of @Sanchit Patiyal answer. AFAIK its supported pretty well:

[id$="Window"] {
  display:none;
}
[id$="Window"]:target {
  display:block;
}

.window{
   width:300px;
   height:300px;
   overflow:hidden;
 }

<a href="#firstWindow">firstWindow</a>
<a href="#secondWindow">secondWindow</a>
<a href="#thirdWindow">thirdWindow</a>
<div class="window">
    <div id="firstWindow" class="window">
         firstWindow
    </div>
    <div id="secondWindow" class="window">
         secondWindow
    </div>
    <div id="thirdWindow" class="window">
         thirdWindow
    </div>
</div>