here's a guide on how to do the hash change section stuff carrd does in html/javascript (so you don't have to take several days to figure it out like i did)
disclaimers:
- i am not an expert by any means so forgive me if i call things the wrong thing lol
- this guide assumes you already have all the html for your site! this wont teach you html. and it doesn't really teach you javascript either i just throw code at you honestly.
- i did Not take carrd's code, i took one look at it and ran for the hills. this is a combo of my non javascript coding experience and a couple javascript tutorials.
step 1: make sure your sections (or divs, or any content that you want to be dependent on the hash) have IDs that match the hashes you want to use! you do this by adding the attribute id="yourIdNameHere" in the opening tag. (example: <p id="blorbo">all about my blorbo</p>)
step 2: add the style="display:none;" tag to the parts you want to only show up when the hash is correct! (example: <p id="blorbo" style="display:none;">all about my blorbo</p>) this will hide them in a way that makes them not take up room on the page when it's not on their particular hash. fun fact, if you put "hidden" instead of "none" it will still take up space despite being invisible!
step 3: i did the javascript for you because javascript is a bitch. add the following into your html's body:
<script type="text/javascript">
let activeSection = null;
let previousSection = null;
window.addEventListener('hashchange', function() {
activeHash = window.location.hash.substring(1);
if(activeHash.length > 0)) {
activeSection = document.getElementById(activeHash);
if(activeSection != null) {
activeSection.style.display = "block";
if(previousSection != null) {
previousSection.style.display = "none";
}
previousSection = activeSection;
}
}
});
</script>
tldr of what that does is it tells the page to figure out what it should be showing based on the hash in the url! long explanation below
basically that makes room for the page to know what the section it's supposed to have open is and what the last section it had open was, then tells it to listen for when the hash on the url changes, and that when that happens it needs to get the new hash, find the new section it's supposed to have open, open it if it exists, and hide the previous section if it exists. then it saves the current section as the previous section, so that the next time the hash changes it knows what to hide!
you should be done now and it should work! congrats!
if it's not working for any reason please lmk and i will try to help but i am also a noob lol
