Using Javascript to hide single/multiple div tags with the same name
Update (March 25th, 2009):
I have created a page on the main site so that you can see how the code works, it may be easier to read than this. Check it out here
After scouring the net for information I finally got my answer from JimmySeal at TechGuy.org. Turns out the process is very simple.
In my first example I want to hide just one div tag when a check box is clicked. The process is a simple one, all we need to do is create a div with an id argument. Like div id=”hideme”. I prefer to use external js files to hold my javascript functions. Lets call it junctions.js. In this file lets put this bit of code.
function toggle_visibility(hideme) { var e = document.getElementById(hideme); if(e.style.display == 'block') e.style.display = 'none'; else e.style.display = 'block'; } |
This will hide the div tag with id hideme
So in my html file I have something like this. (My example is in an input form)
<b>Show the field</b><input type="checkbox" name="a_name" value="a_name" onClick="toggle_visibility('hideme');"> <div id="hideme" style="display:block;"> <b>was hidden</b><textarea name="some_name" cols="40" rows="5"></textarea><br /> </div> |
Notice that the div id and the onClick functions are the same name, hideme. That’s it! How when the box is checked it will hide that one div tag.
What if you want to hide multiple div tags. Unfortunately the above script will not work simply because you can’t have more than one div id per page. You must use div class.
Open up your functions.js file and put this in.
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; } } |
Now for the form code example
<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> |
The only thing you need to pay attention to here is div_class_name just change it to what ever you want to call your div tag.
EDIT NOTE:
I just want to say that I’ve been getting a lot of hits here, but no one leaves me any comments. How do I know if this is helpful? Please leave a comment. I won’t sell your e-mails or anything. If you so desire enter in a fake e-mail, I don’t care. I just want to know. Thank you.
Hi,
Thanks for the great code. Solved one my problems. However, I now have another. Say I have several different class of divs I want to show/hide with several different buttons. E.g I have some class1 divs, some class2 divs and some class2 three divs and I want three different buttons to show/hide the three different classes. How would I do this? I’ve tried implementing several instances of the script with a different class specified but it won’t work.
Thanks
Thanks for the comment. Altho I’m a little unsure of what you mean exactly. Can you e-mail me your code (or an example of it) so I can work on a solution for you?
This topic is quite hot on the Internet right now. What do you pay the most attention to while choosing what to write about?
I’m currently writing a web based program in php and mysql. I need javascript but my js skills are pretty weak. When I run into a problem I check for a solution. Usually when I find one it doesn’t quite do what I need it to. So I change things up, learn, and put my results online. It’s my way of trying to help out and give something back that, hopefully, someone will find helpful.
Hi DaijoubuKun,
Your solution really helped me a lot to fix one of the issue I was facing. Keep the good work going. Thanks
Hi, I’m trying to use this script to show/hide two different sets of div classes from two different checkboxes. I can’t write js from scratch so am at a loss. The show/hide functions work independently, but when you have both checkboxes checked, everything breaks down. Here’s what I have:
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_hideme1()
{
hidden = !hidden;
var newDisplay1;
if(hidden)
{
newDisplay1 = 'block';
}
else
{
newDisplay1 = 'none';
}
var showsum = getElementsByClass("summary", null, "div");
for(var i = 0; i < showsum.length; i++)
{
showsum[i].style.display = newDisplay1;
}
}
function toggle_hideme2()
{
hidden = !hidden;
var newDisplay2;
if(hidden)
{
newDisplay2 = 'block';
}
else
{
newDisplay2 = 'none';
}
var showrea = getElementsByClass("reason", null, "div");
for(var i = 0; i < showrea.length; i++)
{
showrea[i].style.display = newDisplay2;
}
}
Thanks! –cg
Check out http://blog.tangorangers.com/2009/08/using-javascript-to-hide-singlemultiple-div-tags-with-the-same-name-part-2/
That answers your question. Also, thanks for the e-mail containing your html so I was able to validate that it was something with my code. I hope it works out for you. Thanks again.
I’ve slightly edited the code to what you see below. I am using it to hide rows in a table (thus the “tr”).
I also changed “function toggle_hideme()” to “function toggle_hideme(class_name)” and replaced the static class name with this variable. Does that even make sense? Basically, no matter what class name I had in my html/php, I had to go in and edit my javascript to reflect it. Now the class name is a variable that is passed through the input’s onclick to the function.
Also, changing the “var hidden = true” to false…what does that affect?
var hidden = true;
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(class_name)
{
hidden = !hidden;
var newDisplay;
if(hidden)
{
newDisplay = 'none';
}
else
{
newDisplay = 'block';
}
var hellos = getElementsByClass(class_name, null, "tr");
for(var i = 0; i < hellos.length; i++)
{
hellos[i].style.display = newDisplay;
}
}
I'll try to check back on this enough to await your reply.
Also…my input changed. Not the “autocomplete”. This was to fix an issue with Firefox remembering the state of the input field…which I didn’t want to happen.
My page now hides certain rows by default, and only shows them if the user checks the input box (which says something like “Show all achievements”).
I’ve never tried to hide a table tag. This code was written for div tags.
In the line: var hellos = getElementsByClass(class_name, null, “tr”); did you change the class_name to match the tr tag’s name?
I would simply put the tr tag inside a div tag for this example. If I had more free time I would try to get the tr tag working myself. Maybe towards the end of this next week I will have a chance. If I figure it out I will let you know and I may even write a blog post. Good luck!
is what I used…and it works fine. I changed the class of the tr tag, not the name.
I do think I tried putting the row inside of a div, but I had an issue…most likely something else if you’re saying it would work. I also tried putting the div inside of the row/column and when hidden, the row still existed, but was empty (noted by some weird line-height issues).
Also, I never said it was broken, or that I didn’t get mine to work. I just changed your code around to suit my needs and thought I’d share. This was a big help.
Now I feel silly. I saw your second post first, the first one ended up in my spam filter. Next time I’m going to wait to respond until I’m awake enough to comprehend what’s going on before I respond. Thanks for the info. I will look into it more and see what else can be done. Since I’m not adept to js, sometimes it’s very new to me. Hopefully soon I will have a cool new blog post showing what other things can be done with this same script.
greate help to know about div hide/show.. its exceleet
I know this is an old site, but still has a very useful bit of information that is helping me understand javascript.
Thanks a ton
Thanks man, this was real helpful. I figured manipulating a bunch of divs having the same id would be easy, but clearly I was going about it all wrong. This gave me all the help I needed to get moving in the right direction.
Thanks again!
Nice exmple, here you are more simple way whit JQuery show/hide:
function enableDisableDiv() {
if ($(“#chkShowPersonal”).attr(“checked”)) {
$(“#dvPersonal”).show(“fast”);
} else {
$(“#dvPersonal”).hide(“fast”);
}
}
Put somthing here!
Thanks alot!!!! Very useful when i need help!!!!!!!
:)