Hide/Show multiple divs without getElementById

[cangoalie]

Hi
I need to hide/show multiple divs with the clicking of a link. Basically, I want to have one link that allows the user to view all divs, then four links that select only one of my four "types" of divs (Meetings, Tables, Events, Other). The problem with this that I cannot solve is this: on the page I am building I will have more than one div of each type - for example, maybe three Meetings, two Tables, four Events and one Other. This prohibits me from using a JavaScript method using getElementById, as ids have to be individual. I have googled the hell out of this question but don't have any answers. I also realize that I need to use a non-unique attribute like "class" rather than id but I don't know how to accomplish this. Any help you can offer would be greatly appreciated.

[GreatMetro]

You can either use a container DIV for each category, using an ID that is unique for each category, like:

<div id='MeetingsContainer'>
<div id='foo'>meeting stuff</div>
<div id='foo1'>meeting stuff</div>
etc....
</div>
<div id='TablesContainer'>
<div id='somethingelse'>tables stuff</div>
</div>

OR, you can assign a unique id to each div, having the category embedded in the id:

<div id='Meetings_01'>...</div><div id='Tables_01'></div><div id='Meetings_02'></div>... etc etc

In your javascript you can use an indexOf function to see if a particular div contains your category name.

[jeremybass]

Hey i use this to hide show many divs on the same page... i hope i understud you right

<script language="JavaScript" type="text/javascript">
<!--
function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
document.pageLoading.TCallLabel('/','restart_function');
}else{
document.getElementById(divid).style.display = 'none';
}
}
//-->

</script>

Just put in your <a...></a>
onmousedown="javascript:toggleDiv('hideMe3')"
you can use
hideMe3
hideMe4
hideMe5 ect....
hope that helps
and use div id to match

[zerxer]

Hey, you might've gotten the answer you need already considering this thread is a couple days old, though you haven't replied yet. You should check out jQuery (http://www.jquery.com). I've found that it makes coding in JavaScript much easier.

You could first give all your DIVs the arbitrary class that explains what they are and then with jQuery, you could do something like:
$('.their_class').hide() (http://docs.jquery.com/Effects/hide)