Hide by Classname

DescriptionJavascript snippet by - 09/25/10

Use this to target elements with Javascript and hide based on classname. You basically get the element by its classname using Javascript.

Tags

<script type="text/javascript">
var hidden = false;
function getElementsByClass(searchClass, domNode, tagName) {
	if (domNode == null) domNode = document;
	if (tagName == null) tagName = '*';
	var el = new Array();
	var tags = domNode.getElementsByTagName(tagName);
	var tcl = " "+searchClass+" ";
	for(i=0,j=0; i<tags.length; i++) {
		var test = " " + tags[i].className + " ";
		if (test.indexOf(tcl) != -1)
		el[j++] = tags[i];
	}
	return el;
}
 
function toggle_hideme()
{
	hidden = !hidden;
	var newDisplay;
	if(hidden)
	{
		newDisplay = 'none';
	}
	else
	{
		newDisplay = 'block';
	}
	var hellos = getElementsByClass("div_class_name", null, "div");
	for(var i = 0; i < hellos.length; i++)
	{
		hellos[i].style.display = newDisplay;
	}
}
</script>


<input type="checkbox" name="a_name" value="a_name" onClick="toggle_hideme('div_class_name');">
<div class="div_class_name">
	Blah Blah Blah
</div>
<div class="something_else">
	What ever is here will not disappear!
</div>
<div class="div_class_name">
	more blah blah blah
</div>
  • Share
Submitted by: Adam J Nowak
http://hyperspatial.com

Comments and Feedback