Toggling The Visibility of Divs of Classes

**BlueStunt** · 06-03-2008, 07:01 PM

I'm new to javascript, I can understand it but when it comes to writing it I'm pretty useless.

Basically what I'm looking to do is toggle the visibility of divs with a set class within the page. I'm damn sure its possible but I just can't execute it.

This is the toggling script I've nicked from: http://blog.movalog.com/a/javascript-toggle-visibility/

HTML Code:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div id="foo">This is foo</div>

Code:

<script type="text/javascript">
<!--
    function toggle_visibility(id) {
       var e = document.getElementById(id);
       if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
//-->
</script>

And instead of the getElementById(id) I want to getElementByClassName(

using this script: http://www.robertnyman.com/2008/05/2...ame-anno-2008/

Basically I need help integrating one into the other. I've tried anything my newbie brain can perceive.

Your help will be greatly appreciated.

**Medyman** · 06-03-2008, 08:20 PM

1st thing... change the id= to class=

Code:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div class="foo">This is foo</div>

2nd thing... include the getElementsByClassName .js file in the head

Code:

<script type="text/javascript" src="getElementsByClassName.js"></script>

3rd... change the toggle_visibility function to use getElementsbyClassName

All together:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/Hidetle>
<style type="text/css">
.foo { display:none };
</style>
<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
<!--
    function toggle_visibility(className) {
       var e = getElementsByClassName(className);
	   for ( var i=0, len=e.length; i<len; ++i ){
			if(e[i].style.display == 'block')
				e[i].style.display = 'none';
			else
				e[i].style.display = 'block';
		}
    }
//-->
</script>
</head>
<body>

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div class="foo">This is foo</div>


</body>
</html>

**BlueStunt** · 06-03-2008, 08:30 PM

Originally Posted by Medyman

1st thing... change the id= to class=

Code:

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div class="foo">This is foo</div>

2nd thing... include the getElementsByClassName .js file in the head

Code:

<script type="text/javascript" src="getElementsByClassName.js"></script>

3rd... change the toggle_visibility function to use getElementsbyClassName

All together:

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Show/Hidetle>
<style type="text/css">
.foo { display:none };
</style>
<script type="text/javascript" src="getElementsByClassName.js"></script>
<script type="text/javascript">
<!--
    function toggle_visibility(className) {
       var e = getElementsByClassName(className);
	   for ( var i=0, len=e.length; i<len; ++i ){
			if(e[i].style.display == 'block')
				e[i].style.display = 'none';
			else
				e[i].style.display = 'block';
		}
    }
//-->
</script>
</head>
<body>

<a href="#" onclick="toggle_visibility('foo');">Click here to toggle visibility of element #foo</a>
<div class="foo">This is foo</div>


</body>
</html>

Thanks for the help

Can I just query what this little bit does:

Code:

var i=0, len=e.length; i<len; ++i

**codeexploiter** · 06-04-2008, 06:07 AM

Can I just query what this little bit does:

Code:

var i=0, len=e.length; i<len; ++i

It is a part of a looping construct, which is for loop. In the for loop you can start using a new variable, initialize, have a condition check, etc.

Have a look at this page and read the section that describes for loop http://www.howtocreate.co.uk/tutoria...cript/controls

**Medyman** · 06-04-2008, 01:55 PM

Originally Posted by codeexploiter

It is a part of a looping construct, which is for loop. In the for loop you can start using a new variable, initialize, have a condition check, etc.

Have a look at this page and read the section that describes for loop http://www.howtocreate.co.uk/tutoria...cript/controls

Just to add to this...

The loop is necessary because the getElementsByClass functions return an array of all of the elements with that class. Even if it's only one element, it'll be in an array.

So, you need to loop through the array to set properties to the divs contained within it.

**BlueStunt** · 06-04-2008, 08:39 PM

I'm now trying to expand the function to change the background of a div with id the same as the class name I'm modifying. I assumed I'd be able to botch it together myself. I was wrong.

This is one of my attempts, which i feel basically highlights what I'm attempting to do.

Code:

<script type="text/javascript" src="scripts/getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript">

    function toggle_visibility(className) {
       var e = getElementsByClassName(className),
       var f = document.getElementById(className);
       
	   for ( var i=0, len=e.length; i<len; ++i ){
			if(e[i].style.display == 'none')
      {
       e[i].style.display = 'block';
       f[i].style.background='url(graphics/*className*.gif';
      }
      else
      {
	e[i].style.display = 'none';
	f[i].style.background='none';
       }
    }
    }

</script>

However it only show's/hides a single post rather than multiple ones. And nothing changes with the id's background.

Oh and another problem. When the 'else' is executes it takes two clicks on the button to work.

Please help :/

**Minos** · 06-07-2008, 12:11 PM

First, forget the word id. Classes and id's are two separate beasts. The easy way to recall the difference? An id refers to ONE and only ONE object. A class can be a billion objects, if you were really that needy. :P

Your current code:

Code:

<script type="text/javascript" src="scripts/getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript">

    function toggle_visibility(className) {
       var e = getElementsByClassName(className),
       var f = document.getElementById(className);
       
	   for ( var i=0, len=e.length; i<len; ++i ){
			if(e[i].style.display == 'none')
      {
       e[i].style.display = 'block';
       f[i].style.background='url(graphics/*className*.gif';
      }
      else
      {
	e[i].style.display = 'none';
	f[i].style.background='none';
       }
    }
    }

</script>

Basically, like I said above, you don't need f. An id does not exist here. I fixed the syntax, however, I'm not 100% sure if the background will work as intended. I'm not testing it at the moment.

Code:

<script type="text/javascript" src="scripts/getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript">

    function toggle_visibility(className) {
       var e = getElementsByClassName(className);
        
       for ( var i=0, len=e.length; i<len; ++i ){
	 if(e[i].style.display == 'none'){
           e[i].style.display = 'block';
           e[i].style.background='./graphics/' + className + '.gif';
         }
         else{
	   e[i].style.display = 'none';
	   e[i].style.background= '';
         }
       }
     }

</script>

**BlueStunt** · 06-09-2008, 05:59 PM

Originally Posted by Minos

First, forget the word id. Classes and id's are two separate beasts. The easy way to recall the difference? An id refers to ONE and only ONE object. A class can be a billion objects, if you were really that needy. :P

Your current code:

Code:

<script type="text/javascript" src="scripts/getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript">

    function toggle_visibility(className) {
       var e = getElementsByClassName(className),
       var f = document.getElementById(className);
       
	   for ( var i=0, len=e.length; i<len; ++i ){
			if(e[i].style.display == 'none')
      {
       e[i].style.display = 'block';
       f[i].style.background='url(graphics/*className*.gif';
      }
      else
      {
	e[i].style.display = 'none';
	f[i].style.background='none';
       }
    }
    }

</script>

Basically, like I said above, you don't need f. An id does not exist here. I fixed the syntax, however, I'm not 100% sure if the background will work as intended. I'm not testing it at the moment.

Code:

<script type="text/javascript" src="scripts/getElementsByClassName-1.0.1.js"></script>
<script type="text/javascript">

    function toggle_visibility(className) {
       var e = getElementsByClassName(className);
        
       for ( var i=0, len=e.length; i<len; ++i ){
	 if(e[i].style.display == 'none'){
           e[i].style.display = 'block';
           e[i].style.background='./graphics/' + className + '.gif';
         }
         else{
	   e[i].style.display = 'none';
	   e[i].style.background= '';
         }
       }
     }

</script>

Thanks for the help, but I'm afraid you've misunderstood what I'm looking to do.

I wish to use divs with ID X to toggle the visibility of all items with Class X, that has been accomplished, however I also wish to change the background of the ID X so that the user knows whether the Classes are visible or not.

I'm using it here to filter out blog entries from different categories.

**Minos** · 06-09-2008, 06:29 PM

Ahh, I see what you are trying to do. Well, that shouldn't be too bad. What I would do, and someone can correct me if I'm wrong, I would change the name of the ids. I'm not too keen on the idea of them being the same, that can get a little confusing. Then, simply pass another variable to the function:

Code:

<script type="text/javascript">

    function toggle_visibility(className, idName) {
       var e = getElementsByClassName(className),
       var f = document.getElementById(idName);
       
	 for ( var i=0, len=e.length; i<len; ++i ){
	   if(e[i].style.display == 'none'){
             e[i].style.display = 'block';
             f[i].style.background='url(./graphics/' + className '.gif');
           }
           else{
	     e[i].style.display = 'none';
	     f[i].style.background='none';
           }
        }
    }
</script>

Just remember to add the variable when calling the function, ex. toggle_visibility("className", "idName")

Thread: Toggling The Visibility of Divs of Classes

Thread Tools

Search Thread

Toggling The Visibility of Divs of Classes

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Medyman For This Useful Post:

The Following User Says Thank You to Minos For This Useful Post:

Bookmarks

Bookmarks

Posting Permissions