Skip to content

how to hide/show element according to url parameter

i have 4 url parameters like so

and 4 divs like html

<div id='like' class='hide'></div>
<div id='comment' class='hide'></div>
<div id='share' class='hide'></div>
<div id='save' class='hide'></div>

and css


how do i unhide elements when a url param is searched, for example if i search for

the div with id='like should be now visible

what i have tried i have tried to unhide the elements on button click, and I am successful using classList.toggle('hide') but how do I achieve the same thing with changes in url. I would be best if the classList is set acc to the url for example when there is #like in url ,the element with id like should not contain the class hide anymore. other answers are also accepted ,thanks.


No JavaScript needed. Use the CSS :target selector like:

#like.hide:target {display:block;}

.hide {
  display: none;

#save.hide:target {
  display: block;
<div id='like' class='hide'>like</div>
<div id='comment' class='hide'>comment</div>
<div id='share' class='hide'>share</div>
<div id='save' class='hide'>save</div>

<a href="#like">like</a>
<a href="#comment">comment</a>
<a href="#share">share</a>
<a href="#save">save</a>