Controlling a set of elements

**x[E]nOn** · Nov 18, 2006 23:19

i am trying to do something which allows me to control the display of a set, or a group of elements. but i only know how to use the getelementbyid(), which only get ONE element, and not a group of elements.

Code:

function toggle(ele){
	if (document.getElementById(ele).style.display=="none") {
		document.getElementById(ele).style.display="inline";
	} else {
		document.getElementById(ele).style.display="none";
	}
}

and then i have a few span tags of the same id.

Code:

<span id="tag1">serserser</span>
<span id="tag2">serserser</span>
<span id="tag1">serserser</span>
<span id="tag1">serserser</span>

finally i have a link which when click will set all the tag1 spans disappear.
but this isn't working as only the first tag1 span will disppear. the rest remains there intact.

how should i go about doing this?
thanks.

**MikeFoster** · Nov 19, 2006 00:44

Hi x[E]nOn,

No two elements can have the same ID in a document - but they can have the same class name. Experiment with the following. Feel free to ask any questions you may have about it.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Set Display By Class</title>
<style type='text/css'>
.btn {
  border-bottom: 1px dotted #000;
  cursor: pointer;
}
.collapsible {
  background: #ccc;
}
</style>
<script type='text/javascript'>
window.onload = function()
{
  document.getElementById('btnOff').onclick = function() {
    xGetElementsByClassName('collapsible', document, 'span', function(e){e.style.display = 'none';});
  };
  document.getElementById('btnOn').onclick = function() {
    xGetElementsByClassName('collapsible', document, 'span', function(e){e.style.display = 'inline';});
  };
}
// Part of X, a Cross-Browser Javascript Library, Distributed under the terms of the GNU LGPL
function xGetElementsByClassName(c,p,t,f)
{
  var r = new Array();
  var re = new RegExp("(^|\\s)"+c+"(\\s|$)");
  var e = p.getElementsByTagName(t);
//  var e = xGetElementsByTagName(t,p); // See xml comments.
  for (var i = 0; i < e.length; ++i) {
    if (re.test(e[i].className)) {
      r[r.length] = e[i];
      if (f) f(e[i]);
    }
  }
  return r;
}
</script>
</head>
<body>
<h1>Set Display By Class</h1>
<p><span id='btnOff' class='btn'>Set display:none</span> on all spans with class=='collapsible'.</p>
<p><span id='btnOn' class='btn'>Set display:inline</span> on all spans with class=='collapsible'.</p>
<h2>But I must explain...</h2>
<p>Sed ut <span class='collapsible'>perspiciatis unde omnis</span> iste natus error</p>
<h2>Sed ut perspiciatis</h2>
<p><span class='collapsible'>But I must</span> explain to you how all this mistaken</p>
<h2>On the other hand...</h2>
<p>At vero eos <span class='collapsible'>et accusamus et iusto</span> odio dignissi</p>
<h2>At vero eos et</h2>
<p>On the other hand, <span class='collapsible'>we denounce</span> with righteous i</p>
</body>
</html>

**x[E]nOn** · Nov 19, 2006 01:11

thanks MikeFoster!
but i am a little confused with this part

Code:

var re = new RegExp('\\b'+c+'\\b', 'i');

what does it mean? i am not very good with regular expressions.

**MikeFoster** · Nov 19, 2006 01:19

Here is some documentation on xGetElementsByClassName.

The RE searches for a whole word, because the className value might be something like this:

<div class='classname1 classname2 classname3'>...</div>

It is also case-insensitive.

**Kravvitz** · Nov 19, 2006 02:33

Mike, two things. 1) The specs say that classes are case-sensitive, not case-insensitive. 2) \b won't work right if you use hyphens in classes.

I suggest you take a look at this one.