Skip to content

Instantly share code, notes, and snippets.

@zbee
Last active August 29, 2015 14:01
Show Gist options
  • Save zbee/fb04b91ec3eae0f3b611 to your computer and use it in GitHub Desktop.
Save zbee/fb04b91ec3eae0f3b611 to your computer and use it in GitHub Desktop.
claps.js
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.
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.
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";
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment