anchor tag showing hidden div and hide anchor tag itself

Question

I need an anchor tags that link to a hidden div that hides the rest of the content of the page except the div itself , and i know how to do it, but i don't know how to hide also the anchor tag. Also, it would be better if done with Javascript and not jQuery.

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""> this is c id</div>

CSS

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

I found a partial solution to my problem, it basically shows the hidden div, but i need it also to hide the 3 anchor tags, how can i do it? Link to the js fiddle. https://jsfiddle.net/szotev9k/

Answer 1

This could be achieved with pure CSS, if you structure the HTML to enable it - it requires a bit of tweaking the use of a slightly more advanced sibling selector.

https://jsfiddle.net/d15Lahkz/1/

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

And

.page {
  display: inline-block;
 }
.content {
  display: none;
 }

.page:target ~ :not(.page:target) {
  display: none;
}

.page:target a{
    display: none;
}
.page:target > .content{
    display:block;
}