Show section/div depends on after hash # value in link

Question

I have following page

section {
 height: 1000px;
 background: yellow;
 margin: 50px;
}

<section id="one">Section one</section>
<section id="two">Section two</section>

It is possible using html/css only to show only ONE section if user came from link which contains section id after hash e.g

• if user go to link http://my-site/page#one he should only see section one
• if user go to link http://my-site/page#two he should only see section two
• if user go to link http://my-site/page he should see all sections

?

Answer 1

You can investigate the use of the :target pseudo-class, but you might struggle to show all of the sections when the URL hash is empty.

For example:

section:not(:target) { display:none; }
section:target { display: block }

<a href="#one">One</a>
<a href="#two">Two</a>

<section id="one">Section one</section>
<section id="two">Section two</section>