How to open a hidden div from url with #anchor

Question

I have a page that has a grid of staff bios, when the bios are clicked additional information is displayed in a modal. I would like to be able to display the content of specific staff when linked from another page. I would like to use plain javascript and add a #anchor in the url.

When I was building this set up I seemed to have stumbled apon this on accident, but now it won't work. The closest I have gotten is from this post: How to open a hidden div when a hash is on the URL?

/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).classList.add("bio-open");
    }

Here is my markup:

<div class="bio-tile">
  <div id="close" class="anchor"></div>
    <div class="tile-inner" onclick="speakerDetails('open')">
    //Thumbnail content here
    </div>
</div>

<div id="open" class="speaker-details">
  <div class="speaker-details-wrapper">         
    <span onclick="speakerDetailsClose('open')" class="speaker-close">×</span>
    //details content here
  </div>
</div>

Here are the scripts on the page:

/* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
    document.body.classList.add("allow-overflow");
    document.documentElement.classList.add("allow-overflow");
});

var speaker;

/*To open the details window when the ID # is used in the url*/
var hash = window.location.hash.replace('#', '');
    if (hash) {
        document.getElementById(hash).classList.add("bio-open");
    }

/* To open Speaker Bio Pop Up and prevent body/html scroll*/    
function speakerDetails(slug) {
    speaker = document.getElementById(slug);
    speaker.classList.add("bio-open");
    document.body.classList.add("no-overflow");
    document.documentElement.classList.add("no-overflow");
    document.documentElement.classList.remove("allow-overflow"); 
}

/*To Close Speaker Bio Pop Up When X close button is clicked and allow body/html scroll*/
function speakerDetailsClose(slug) {
    speaker.classList.remove("bio-open");
    document.body.classList.remove("no-overflow");
    document.documentElement.classList.remove("no-overflow");
    document.documentElement.classList.add("allow-overflow");
}

/*To Close Staff Bio Pop Up when clicked outside of the bio container and allow body/html scroll*/
window.onclick = function(event) {
    if(event.target == speaker) {
        speaker.classList.remove("bio-open");
        document.body.classList.remove("no-overflow");
        document.documentElement.classList.remove("no-overflow");
        document.documentElement.classList.add("allow-overflow");
    }
}

I would like to have the page load using a www.site.com/page#open url, to display one of the bio details divs on load and then be able to close it to access the other bios on the page.

Answer 1

You're close. Basically when you are selecting things in the DOM you need to know the elements are there. What's happening is that the code inside of your if statement around the hash is getting executed before the DOM is loaded so the element doesn't existing and is returning null.

Here is what I did to work around that; just move your the hash var and the if statement into your DOMContentLoaded event listener.

document.addEventListener('DOMContentLoaded', function(event) {
  //the DOMContentLoaded event occurred, which means the DOM is done loading.

  /*To open the details window when the ID # is used in the url*/
  var hash = window.location.hash.replace('#', '');

  if (hash) {
    // you don't have to do this extra save to a var, but it's clearer
    var elem = document.getElementById(hash);
    elem.classList.add("bio-open");
  }
});

Answer 2

I have figured it out! Thought I would share for the rest of the SO world and thanks to bgaynor78 for getting me headed towards the right idea.

I used document.addEventListener('DOMContentLoaded', function(event) { twice, which I am not sure if that is totally best practice.

var speaker;
var hash = window.location.hash.replace('#', '');
var tag;

    /* To Allow Body and HTML scroll on load in class to be toggled */
window.addEventListener('DOMContentLoaded', (event) => {
    document.body.classList.add("allow-overflow");
    document.documentElement.classList.add("allow-overflow");
});


/*To open the details window when the ID # is used in the url*/
window.addEventListener('DOMContentLoaded', (event) => {

    if (hash) {
        tag = document.getElementById(hash);
        tag.classList.add("bio-open");
        document.body.classList.add("no-overflow");
        document.documentElement.classList.add("no-overflow");
        document.documentElement.classList.remove("allow-overflow"); 
    }
});

I then added some IF statements to reference in the scripts to close the window:

function speakerDetailsClose(slug) {
    if (hash) {
        tag.classList.remove("bio-open");
        speaker.classList.remove("bio-open");
        document.body.classList.remove("no-overflow");
        document.documentElement.classList.remove("no-overflow");
        document.documentElement.classList.add("allow-overflow");
    }

    else {
    // the rest of the script