CodingForums.com - getElementsByClassName to call multiple classes of same name

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - getElementsByClassName to call multiple classes of same name (http://www.codingforums.com/showthread.php?t=285859)

carevealed

01-16-2013 01:32 AM

getElementsByClassName to call multiple classes of same name

I have several sections of content on my site that are default 'hidden' in CSS. I use the getElementById so visitors can open each section of content individually. I now would like to add the option to open ALL content at once. All sections are contained in <div> tags with the class="show". How could I do this with getElementsByClassName?

Here's what I have so far:

function showHideAll(className) {
document.getElementsByClassName(className).style.display = 'block';
}

<a href="#" id="showAll" class="showLink" onclick="showAll('show');return false;">SHOW ALL CONTENT</a>

<div id="content" class="show">CONTENT 1</div>
<div id="content2" class="show">CONTENT 2</div>
<div id="content3" class="show">CONTENT 3</div>

EXAMPLE PAGE:
http://carevealed.com/cc.php

felgall

01-16-2013 06:15 AM

getElementsByClassName returns nodelist and not an individual node so what you need is a loop that processes the nodelist to set the style.display to 'block' for each entry in the nodelist.

Code:

function showHideAll(className) {

var n = document.getElementsByClassName(className);

for (var i = n.length-1; i>=0;i--) n[i].style.display = 'block';        

}

Old Pedant

01-16-2013 10:19 PM

And we should note that getElementsByClassName is not supported by older MSIE browsers.

So you might want to just stick with getElementsByTagName.

Code:

function showHideAllDivs(className, show) 

{

   var divs = document.getElementsByTagName("div");

   for (var d - 0; d < divs.length; ++d )

   {

        var div = divs[d];

        if ( div.className == className )

        {

            div.style.display = show ? "block" : "none";

         }

    }

    return false;

}

...

<a href-"#" onclick="return showHideAll('show',true);"> Show all </a>

<a href-"#" onclick="return showHideAll('show',false);"> Hide all </a>

You could create a replacement for getElementsByClassName, but if this would be the only use for it on the page, there's not much point.

rnd me

01-17-2013 12:22 AM

it would be better to avoid compat problems by simply creating a CSS rule that hides all the classes you want to hide: no loops, no compat issues, and faster performance.

Code:

<style>

body.hide .show { display: none; }

</style>

js:

Code:

document.body.className="hide"; // to hide

document.body.className=""; // to show

Old Pedant

01-17-2013 12:46 AM

Good one, RndMe.

You could also do it a bit more restrictive, if that mattered:

Code:

<style type="text/css">

.hideAll .hide {

    display: none;

}

</style>

...

<div id="holder">

    <div class="hide">...</div>

    <div class="hide">...</div>

    <div class="hide">...</div>

</div>



<a href="#" onclick="document.getElementById('holder').className='hideAll';return false;">Hide all</a>

<a href="#" onclick="document.getElementById('holder').className='';return false;">Show all</a>

You might do it this way if you had multiple "holder" divs where you wanted this kind of control and/or if your <body> needed to be able to change class names for other reasons.

felgall

01-17-2013 01:10 AM

To cater for old IE simply include the following additional code to define getElementsByClassName for when the browser doesn't:

Code:

if (!document.getElementsByClassName)

document.getElementsByClassName = function(cl) {

var retNode, myclass, elem, classes;

retnode = [];

myclass = new RegExp('\\b'+cl+'\\b');

elem = this.getElementsByTagName('*');

for (var i = 0, ii = elem.length; i < ii; i++) {

classes = elem[i].className;

if (myclass.test(classes)) retnode.push(elem[i]);

}

return retnode;

};

rnd me

01-17-2013 01:14 AM

Quote:

Originally Posted by felgall (Post 1306760)

To cater for old IE simply include the following additional code to define getElementsByClassName for when the browser doesn't:

Code:

if (!document.getElementsByClassName)

document.getElementsByClassName = function(cl) {

var retNode, myclass, elem, classes;

retnode = [];

myclass = new RegExp('\\b'+cl+'\\b');

elem = this.getElementsByTagName('*');

for (var i = 0, ii = elem.length; i < ii; i++) {

classes = elem[i].className;

if (myclass.test(classes)) retnode.push(elem[i]);

}

return retnode;

};

good try, but fails.

this is exactly why i recommended using CSS:

Code:

if (!document.getElementsByClassName2) document.getElementsByClassName2 = function(cl) {

        var retNode, myclass, elem, classes;

        retnode = [];

        myclass = new RegExp('\\b' + cl + '\\b');

        elem = this.getElementsByTagName('*');

        for (var i = 0, ii = elem.length; i < ii; i++) {

                classes = elem[i].className;

                if (myclass.test(classes)) retnode.push(elem[i]);

        }

        return retnode;

};



document.body.className="one-active";

alert(

  document.getElementsByClassName2("one")[0].className==="one-active"

);//should be false, but it's true!

Old Pedant

01-17-2013 01:30 AM

Well, we could work harder on that regular expression and correct the problem, but yeah, your CSS trick works a lot better.

FWIW, in my replacement for getElementsByClassName I simply look for the given string to be contained in the className. Yes, I know that means that looking for "one" will incorrectly find "one-active" or even "none" or "lonesome". But that just means I'm really careful about making sure my class names don't have potential problems like that.

felgall

01-17-2013 07:47 AM

Quote:

Originally Posted by rnd me (Post 1306763)

good try, but fails.

It only fails if you use hyphens in your class names. While - and _ are technically allowed they are not compatible with all browsers. In particular using - in a class can break a lot of JavaScript references to it since it could possibly end up being treated as a minus sign and definitely gets treated as a word boundary.

Anyway if you insist on using hyphens in class names then you could replace the '\\b'+cl+'\\b' in the regexp with '(^| )'+cl+'( |$)' so that it specifically tests just for space and start/end string boundaries. Then your classes would only malfunction in the other places where JavaScript treats the hyphen differently.

rnd me

01-17-2013 08:30 AM

Quote:

Originally Posted by felgall (Post 1306825)

It only fails if you use hyphens in your class names.

Anyway if you insist on using hyphens in class names then you could replace the '\\b'+cl+'\\b' in the regexp with '(^| )'+cl+'( |$)' ....

my point was that if good coders like you can make mistakes, what else is missing, how much can we rely on such a function, and do we really NEED to hinge our entire operation on such a contraption.

there are other conformance and performance issues with the script, i'm not going to nit pick.

We collectively built a decent one a while back: http://www.codingforums.com/showthread.php?t=154727 (2009)

even still, i think that avoiding loops is always good, avoiding hidden snags is always good, and that CSS offers more precise group definition since its CSS selectors work in IE7 without a bunch of bring-your-own code.

cheers

All times are GMT +1. The time now is 06:04 AM.