[SOLVED] javascript show / hide

[knowram]

I am new to javascript and I was hoping someone would help me edit this code.

 

I found this simple show / hide code at

 

http://www.movalog.com/archives/code-snippets/javascript-toggle-visibility

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

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

i would like to use it to show different things on a page depending on what link is clicked. something like this

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

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

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

 

Thats easy enough but is there a way that I can make it hide what is not clicked? so if I click foo1 and then click foo2 when I click foo2 it will hide foo1? If there is already something like this outer. please send me a link

 

thanks for the help

 

 

 

[tomfmason]

What i would do is give the elements the same class name and then use something like this function to gather all the elements with the same class name.

 

            document.getElementsByClassName = function(clsName){
    		var retVal = new Array();
    		var elements = document.getElementsByTagName("*");
    		for(var i = 0;i < elements.length;i++){
        		if(elements[i].className.indexOf(" ") >= 0){
            		var classes = elements[i].className.split(" ");
            		for(var j = 0;j < classes.length;j++){
                		if(classes[j] == clsName)
                    		retVal.push(elements[i]);
            		}
        		}
        		else if(elements[i].className == clsName)
            			retVal.push(elements[i]);
   			    }
    			return retVal;
  }

          function showHide(id, clName) {
                 var classes = document.getElementsByClassName(clName);
                 for(var i = 0;i<classes.length;i++){
                      if(classes[i].id == id){
                         classes[i].style.display = (classes[i].style.display == 'none')? 'block' : 'none';
                      }else{
                         classes[i].style.display = 'none';
                      }
                 }
          }

 

it can be used like this

<div id="foo1" class="showHide" style="display:none;">div foo #1</div>
<div id="foo2" class="showHide" style="display:none;">div foo #2</div>
<div id="foo3" class="showHide" style="display:block;">div foo #3</div>
<a onclick="showHide('foo1', 'showHide');">Show/Hide foo #1</a>
<a onclick="showHide('foo2', 'showHide');">Show/Hide foo #2</a>
<a onclick="showHide('foo3', 'showHide');">Show/Hide foo #3</a>

 

 

[knowram]

thank you so much. I am not sure how that works but it does so thanks.

[tomfmason]

Yeah sorry I should have explained it better. The document.getElementsByClassName is not my function but it is as good or better then something I would have written my self so I just use it. What it does is search the entire page for elements with what ever class name is passed to it and returns an array of objects. By object I mean the same type of object that is returned from document.getElementById. I will post the code again but with comments that explain what is happening.

 

           document.getElementsByClassName = function(clsName){
    		//establish a new array. This will be the array of objects returned
                var retVal = new Array();
                //this will gather all of the elements on the page.
    		var elements = document.getElementsByTagName("*");
                //here we loop through each element
    		for(var i = 0;i < elements.length;i++){
                        //this will match the classname against the classname passed to the function
        		if(elements[i].className.indexOf(" ") >= 0){
            		var classes = elements[i].className.split(" ");
            		for(var j = 0;j < classes.length;j++){
                		if(classes[j] == clsName)
                    		retVal.push(elements[i]);
            		}
        		}
        		else if(elements[i].className == clsName)
            			retVal.push(elements[i]);
   			    }
    			return retVal;
  }

          function showHide(id, clName) {
                 //here we use our getElementsByClassName to gather all of our elements that we need hidden
                 var classes = document.getElementsByClassName(clName);
                 //now we loop through them
                 for(var i = 0;i<classes.length;i++){
                      //as i said their is an array of objects returned and as we loop through them
                      //we check to see if the id matches the id passed to the function
                      if(classes[i].id == id){
                         //this will set the display of our object if the id's match.
                         classes[i].style.display = (classes[i].style.display == 'none')? 'block' : 'none';
                      }else{
                         //if it don't match we hide the element
                         classes[i].style.display = 'none';
                      }
                 }
          }

 

That isn't the best explanation but it should help out some. I have never really been the best at explaining what the code does but I can write good code that works