Show/Hide functionality

I’ve added a new functionality to my website, and that’s something I’ve been meaning to add since I had Spoilers. For example:

Spoilers: (Show)

<INSERT SUPER MAJOR SPOILERS THAT YOU’D KILL YOURSELF IF YOU READ IT>

Unfortunately I don’t think I’ll be going back and editing every spoiler to insert that functionality.

I did also add it to the links on the side so I can hide a bunch of stuff by default. Enjoy!

Here’s how to do it if you’re interested:

First, you’ll need the javascript code that’ll show and hide the blocks:

<script type="text/javascript">
function toggle(blockID)
{
  var block = document.getElementById(blockID);
  var displayProperty = block.style.display;
  var text = document.getElementById(blockID + "Tog");
  
  if (displayProperty == 'none')
  {
    block.style.display = 'block';
    text.innerHTML = "Hide";
  }
  else
  {
    block.style.display = 'none';
    text.innerHTML = "Show";
  }
}
</script>

What this chunk of code does is it’ll either hide or unhide the element that it finds by the ID you pass in by checking to see if it’s currently hidden or not. If it’s hidden, it’ll unhide it. If it’s being shown, it’ll hide it. There’s also different section of code where it finds the element which has a specific ID based on the ID you passed in, which I’ll explain later. What it does is change the text to “Show” or “Hide” depending on if it’s hidden anymore.

For any element you want to hide with this toggle function, you just need to give it a UID (unique ID). For example:

Afterwards, you’ll just need to construction a link to do the toggle. You’ll also need to give this link a UID based on the UID of the block you want to toggle. Here’s the code:

Notice how the link id is toggleTestTog and the block id is toggleTest. For my code you need to append the Tog to the UID of the block id for it to be able to know what text to change.

Here’s the above example in running:

this is a toggle test

Hide

If you want to have the item hidden by default, you just need to update code of the item to have a style attribute of display:none:

Here’s the corresponding link code:

Here’s the example of the code already hidden. I changed the id to toggleTest2 since it needs to be unique. I also changed the link text from Hide to Show since it’s hidden by default:

this is a toggle test 2

Show

I did try to find if I knew the elementID of the object that called me, but I wasn’t able to find much info. If you know how a javascript function can figure out the object/element that called it, please do let me know. Just leave me a short message in the comments section.