#html guide

Drop-Downs

<details>

  <summary>Drop Down Label</summary>

Item One<br />

Item Two<br />

Item Three<br />

Item Four<br />

Item Five<br />

Item Six<br />

Item Seven<br />

Item Eight/Last Item</details>

★ Please note, the ‘<br />’ acts as an ‘and’, you can add as many items as you want! Just make sure that the last item ends in ‘</details>’.

Headings

<h1>Insert desired word or phrase</h1>

<h2>Insert desired word or phrase</h2>

<h3>Insert desired word or phrase</h3>

<h4>Insert desired word or phrase</h4>

<h5>Insert desired word or phrase</h5>

<h6>Insert desired word or phrase</h6>

★ ‘h1’ is the largest option, descending in size down to ‘h6’.

Imbedded Images

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