CSS - show / hide content with anchor name

Question

Single page website

I have a single page website (one page only). I can navigate with a menu to get to different parts of the page with anchor name, just like (see sidebar):

WordPress Docs

Hide the other stuff

I want to hide stuff that does not belong the the current active page part and just show the information of the part that I'm looking at.

Question(s)

• Can I hide stuff that is not a part of the current #anchor_part with only CSS?
• Have you seen any sites already doing this?

Answer 1

yes you can do this with only css,first creat < div > with a specific width and height and overflow to hidden,then place your stuff in this div beside eachother

<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;
 }

something like above; note that you can use this html/css if you have a constant height,the height of your stuff should be the same.

Answer 2

Working Example

Try this Html

<a href="#a">a</a>
<a href="#b">b</a>
<a href="#c">c</a>

<div id="a" class="page"> this is a id</div>
<div id="b" class="page"> this is b id</div>
<div id="c" class="page"> this is c id</div>

and Css

#a, #b, #c{
    display:none;
}
#a:target{
    display:block;
}
#b:target{
    display:block;
}
#c:target{
    display:block;
}