claps.js

_claps

At some point in my life I needed to use JQuery's toggle(), show(), and hide() functions but could not use JQuery, so I made claps.js.

I have no idea why anyone else would need this -heck, I can't remember why I needed it-, but here it is anyways.

Enjoy.

_howToUse

Say you have this HTML:
<div id="cake">
I enjoy a LOT of different kinds of cake!!!
</div>

If you want to quickly hide it without JQuery, just use this JS after you include claps.js:
claps.hide("#cake");

You may note that in claps.js the # is being removed. That's because getElementByID() only searches for IDs in the html file, and having that # there would make it look for <div id="#cake">, which it won't find. (It's there to make it easy for me to switch between using claps and JQuery [which uses toggle("#cake")])

Want it to collapse the cake div when you click a button? EASY!
<a class="button" onClick="claps.toggle('#cake')">Cake?</a>

I used toggle() there instead of hide() so that you could click the button once, have it be hidden, click it again to have it shown, and then click it yet again to hide it once more.

claps.js

var claps = {};

claps.toggle = function(id) {
  id = id.replace("#", "");
  if (document.getElementById(id).style.display == "inline-block" || document.getElementById(id).style.display == "block") {
    document.getElementById(id).style.display = "none";
  }
  else {
    document.getElementById(id).style.display = "inline-block";
  }
}

claps.hide = function(id) {
  id = id.replace("#", "");
  document.getElementById(id).style.display = "none";
}

claps.show = function(id) {
  id = id.replace("#", "");
  document.getElementById(id).style.display = "inline-block";
}