Show/Hide Javascript Needed

david5220 · #1 (**permalink**) 12-12-2005, 09:39 PM

Hello

I need a javascript show/hide system which works on a hyper link (<a href="javascript:whatever">Show/Hide</a>, It needs to close all the other divs or spans or whatever when it opens another one. It is going to be used with a DHTML menu (Sothink DHTMLMenu). I use frontpage. Please i need a good one too...

Thanks

David

Till · #2 (**permalink**) 12-14-2005, 12:49 PM

I'll give you an example.

At first, some JavaScript:

Code:

function show_hide(the_layer)
{
  if(document.getElementById(the_layer))
  {
    if(document.getElementById(the_layer).style.display == 'none')
    {
      document.getElementById(the_layer).style.display = 'inline';
    }
    else
    {
      document.getElementById(the_layer).style.display = 'none';
    }
  }
}

And some HTML:

Code:

<div id="foobar">Some text to be hidden or displayed.</div>
<br /><a href="javascript:show_hide('foobar');">Show/hide</a>

Hope this gets you started!

Till

david5220 · #3 (**permalink**) 12-15-2005, 12:13 AM

This is what i have found


<script language="JavaScript">


</script>


javascript:ShowLayer('home')

but i changed the visibility:none to display:block as i wanted it to take up no space. ' if(document.layers){ document.layers[active].visibility = "hide";} ' what does it mean? do i need to change that as well?

Is this a good script? 1 page for the whole website!

Thanks
David Lawson
*newb*

curtiss · #4 (**permalink**) 12-15-2005, 05:23 AM

It's a good script, and it's actually almost identical to what Till posted for you. However, it really only does about half of what you asked.

This is the javascript I use for such a task. I got it from some free scripts site a long time ago, but I don't remember which one anymore.

Code:

var activeSub=0;
var SubNum=0;

function reDo(){ window.location.reload() }
    window.onresize = reDo;


    //Define global variables

	    var timerID = null;
		var timerOn = false;
		var timecount = 1000;
		var what = null;
		var newbrowser = true;
		var check = false;

    	function init(){
    	//  alert ("Running Init");
          if (document.layers) {
                      //  alert ("Running Netscape 4");
                        layerRef="document.layers";
                        styleSwitch="";
                        visibleVar="show";
			screenSize = window.innerWidth;
			what ="ns4";


          }else if(document.all){
                      //  alert ("Running IE");
                        layerRef="document.all";
                        styleSwitch=".style";
                        visibleVar="visible";
			screenSize = document.body.clientWidth + 18;
			what ="ie";

		  }else if(document.getElementById){
                      //  alert ("Running Netscape 6");
                        layerRef="document.getElementByID";
                        styleSwitch=".style";
                        visibleVar="visible";
			what="moz";
		  
		  }else{
		  	//alert("Older than 4.0 browser.");
			what="none";
			newbrowser = false;
		  }
		  
 
		window.status='The SES Companies';
		check = true;
  	 	}

	// Turns the layers on and off
        function showLayer(layerName){
        	if(check){
        		if (what =="none"){
        			return;
        			}
	        	else if (what == "moz"){
        			document.getElementById(layerName).style.visibility="visible";
        			}
        		else{
                  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="visible"');
                  }
		 }
        	else {// alert ("Please wait for the page to finish loading.");
        		return;}
		}

        function hideLayer(layerName){
        	if(check){
        		if (what =="none"){
        			return;
        			}
        		else if (what == "moz"){
        			document.getElementById(layerName).style.visibility="hidden";
        			}
        		else{
                  eval(layerRef+'["'+layerName+'"]'+styleSwitch+'.visibility="hidden"');
				}
        
        	}
        	else {// alert ("Please wait for the page to finish loading.");
        		return;}
        }


		function hideAll(){
				hideLayer('layer1');
				hideLayer('layer2');
				hideLayer('layer3');
				hideLayer('layer4');
				hideLayer('layer5');
				hideLayer('layer6');
				hideLayer('layer7');
				hideLayer('layer8');
				}


		function startTime() {
	        if (timerOn == false) {
                timerID=setTimeout( "hideAll()" , timecount);
                timerOn = true;

	        }

		}


		function stopTime() {
	        if (timerOn) {
    	        clearTimeout(timerID);
                timerID = null;
                timerOn = false;
	        }
		}

		function onLoad(){
			init();
			
			}

You will then need to add:

Code:

onload="init()"

to your body tag as well.

Your links will look like:

Code:

<a href="/Foo/" onMouseOver="hideAll(); showLayer('layer1'); stopTime()" onMouseOut="startTime();">

and the links within your hidden divs will need to look like:

Code:

<a href="/Tanks/" onMouseOver="stopTime();" onMouseOut="startTime();">

All of the areas in red will need your attention. The "HideAll" function in the javascript will need to include the complete list of divs that you have, as any div not listed in that function will not be hidden when you want to show a new one.

gtatler · #5 (**permalink**) 03-15-2007, 04:59 AM

I use Till's script, slightly amended in the div as follows :-

<a href="javascript:show_hide('foobar');">Show/hide the text</a><br /><br />
<div style="display: none;" id="foobar">
<p>Some text to show/hide</p></div><br />

You will notice that I have moved the text link above the <div> which makes the hidden text appear below it. I have also added in the <div> style="display: none;" so that the text is NOT shown until the link is clicked.

An example may be found by visiting my Agatha Christie site (see my signature block) and viewing any of the novel titles.