Hiding elements using identification by class

jacob · February 1st, 2004, 08:04 AM

In javascript it is possible to show/hide some elements on a page using the display property of style sheets using a function like this...

Code:

function expandSection(sectionId)
{
    var field;
    field = document.getElementById(sectionId);
    if(field != null)
        field.style.display = (field.style.display != "block")? "block" : "none";
}

However I would like to address a class of elements, and not only one element. I have got a table in which I would like to show some rows in a simple mode and in an advanced mode I would like to show all rows.

How is this possible!? Is there e.g. a function getElementsByClass, which return an array of elements!?

Thanks

Jacob.

joefawcett · February 1st, 2004, 08:26 AM

If you mean for elements with a class="highlight" or similar you wish to get all the elements by their class name then no, there's no such method.
You would have to loopthrough all ther elements in the body or a known subsection and test their className. You would need to be careful as elements can have more than one class, class="highlight red" for instance. If your target browser was IE5.5 or above you could use a regular expression:

Code:

function hasClass(Element, ClassName)
{
  var oRE = new RegExp("\\b" + ClassName + "\\b", "i");
  return oRE.test(Element.className);  
}

--

Joe

jacob · February 1st, 2004, 08:48 AM

Thanks for the reply, then I think I will try to make two functions toggleSection and toggleSections, where the last have some argument specifying the pattern and call the toggleSection function!

Now another problem emerged! I try this...

Code:

<INPUT CLASS='button' type='button' onClick="alert('something'); simple(); return false;" value='advanced'>

...where the simple function is a function that merely have an alert call!

Only the first alert is called, and no errors has occured. What is wrong with this!!? It seems so simple, but it do not work!

Thanks!

Jacob.

Jacob.

joefawcett · February 2nd, 2004, 06:12 AM

Seems very strange, can you show the actual function and also the definition of the class 'button'?

--

Joe

jacob · February 2nd, 2004, 03:52 PM

Sorry! Finally I found the error. Why is it that it is always the small errors that is hard to find...

Code:

for(i = start; i < ender, i++)

The error is in this one! Pretty obvious when extracted from the context.

I do not know why IE did not show that yellow icon at the bottom of the page!

Thanks Joe :)

Jacob.