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:<\/p>\n
Spoilers<\/strong>: (Show<\/a>)<\/p>\n <INSERT SUPER MAJOR SPOILERS THAT YOU’D KILL YOURSELF IF YOU READ IT<\/strong>><\/p><\/blockquote>\n Unfortunately I don’t think I’ll be going back and editing every spoiler to insert that functionality.<\/p>\n I did also add it to the links on the side so I can hide a bunch of stuff by default. Enjoy!<\/p>\n Here’s how to do it if you’re interested:<\/p>\n First, you’ll need the javascript code that’ll show and hide the blocks:<\/p>\n 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.<\/p>\n For any element you want to hide with this toggle function, you just need to give it a UID (unique ID). For example:<\/p>\n 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:<\/p>\n Notice how the link id is toggleTestTog<\/strong> and the block id is toggleTest<\/strong>. For my code you need to append the Tog<\/strong> to the UID of the block id for it to be able to know what text to change.<\/p>\n Here’s the above example in running:<\/p>\n this is a toggle test<\/p>\n Hide<\/a><\/p><\/blockquote>\n 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<\/strong>:<\/p>\n Here’s the corresponding link code:<\/p>\n 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:<\/p>\n this is a toggle test 2<\/p>\n\n
<script type=\"text\/javascript\">
\nfunction toggle(blockID)
\n{
\n var block = document.getElementById(blockID);
\n var displayProperty = block.style.display;
\n var text = document.getElementById(blockID + \"Tog\");
\n
\n if (displayProperty == 'none')
\n {
\n block.style.display = 'block';
\n text.innerHTML = \"Hide\";
\n }
\n else
\n {
\n block.style.display = 'none';
\n text.innerHTML = \"Show\";
\n }
\n}
\n<\/script><\/code><\/div>\n<\/blockquote>\n<p id=\"toggleTest\">this is a toggle test<\/p><\/code><\/div>\n<a id=\"toggleTestTog\" href=\"javascript:toggle('toggleTest');\">Hide<\/a><\/code><\/div>\n\n
<p id=\"toggleTest2\" style=\"display:none\">this is a toggle test 2<\/p><\/code><\/div>\n<a id=\"toggleTest2Tog\" href=\"javascript:toggle('toggleTest2');\">Show<\/a><\/code><\/div>\n\n