Anchor/Pseudo-URL Hide/Show-CSS Issue - html

Question

I trying to experiment with single page websites. However I have come to a point where I'm stuck.
I use Anchors and :target Pseudo-classes to get a website appearing as normal website. I do this by using div's that are switched to display: block/none as needed.
My cut down code to show the issue:
function showIndex() {
document.getElementById("Index").style.display = "block";
}
function hideIndex() {
document.getElementById("Index").style.display = "none";
}
#nav, #content {
padding: 10px;
margin: 0 0 20px 0;
}
.navButton {
float: left;
width: 50px;
background-color: blue;
padding: 5px;
margin: 0 10px 0 0;
color: white;
}
.contentBox {
float: clear;
width: 400px;
border: 1px solid blue;
padding: 5px;
}
#A, #B, #C {
display: none;
}
#A:target, #B:target, #C:target {
display: block;
}
<div id="nav">
Index</div>
<div class="navButton">Page A</div>
<div class="navButton">Page B</div>
<div class="navButton">Page C</div>
</div>
<div id="content">
<div id="Index" class="contentBox">Here is the Page: Index</div>
<div id="A" class="contentBox">Here is the Page: A</div>
<div id="B" class="contentBox">Here is the Page: B</div>
<div id="C" class="contentBox">Here is the Page: C</div>
</div>
Everything workign fine and as intended as long as the side is opned through index.html. However if I open the side through its anchor / pseudo-url like index.html#A, both divs (Index + A) will be shown instead of just A.
I'm aware why both are shown. If I hide Index by default, the user will get an empty page at start. I cant use .htaccess to redirect to the very same page like Redirect index.html index.html#Index and neither is declaring index.html#Index as startpage an option for different reasons.
Does anyone know a solution to hide Index Div if the page is opened through an anchor url?

Answer 1

One way to do accomplish this is with the hashchange event. Of course, with this, you will also want to remove the show and hide inline event listeners.
window.addEventListener("hashchange", function (e) {
let hash = location.hash.slice(1) || "Index";
document.querySelectorAll(".contentBox").forEach((el) => {
el.style.display = el.id === hash ? "block" : "none";
});
});
Just add that inside script tags. It will run once on load, and then every time the hash changes. If the hash is empty, it will show index. Otherwise, it will try and show whatever element has the id matching whatever the hash is. Only problem with this is that if the target is to "#V" and you don't have a .contentBox with the id of V, it won't show anything. You can work around this easily enough by testing if there are any visible .contentBox after the loop, but I'll leave that for you to figure out.
Edit: I would've thought this would catch page refreshes as well, but in the case that you want to cover every single base, you could do this:
function hideHash(){
let hash = location.hash.slice(1) || "Index";
document.querySelectorAll(".contentBox").forEach((el) => {
el.style.display = el.id === hash ? "block" : "none";
});
}
window.addEventListener('load',function(){
hideHash();
window.addEventListener("hashchange",hideHash);
});
This will add the event listener for the hashChange during the load event, after firing once during the load event. Doing it this way prevents it from accidentally firing twice on page load, which would probably cause some flickering. Note - if you notice flickering on page load, you can wrap the second event listener in a setTimeout function, because hashChange fires after load, and it's theoretically possible that it will still get called during load without introducing a delay.