Show and hide div

JavaScript
1

Dear All,
I have an application where at the top I have a div id=“title” for the title then in the midlle div id=“map” I have the google map then bottom I have buttons div id=“mainOption”. So what I want is that I want another few div at the right. By default one of the div I will fill up with a combo box and and submit button. The problem I want the div only to be shown when I pressed the button at the bottom div. Below is my code but without the side div.

<body onload="createMap()" onunload="GUnload()">
    	  <div id="title1" style="padding: 4px; overflow: auto; background-color: #8EB4E3;">
              <table border="0" cellspacing="0" cellpadding="0">
			        <tr>
			        <td></td>
			        </tr>
			         
			        <tr>
			        <td>OUR SYSTEM</td><td width="11%" height="10"><div align="right"><img src="../fleet/images/logos/<?=$fleetID?>.png" width="100" height="50" /></div></td>
			        </tr>
			        </table>
        </div>
        <div id="map" style="width:100%; height:80%">Map goes here.</div>
        <div id="mainOptions" style="position:absolute; left: 10px; background-color: #8EB4E3;">
			            <table border="0" cellspacing="0" cellpadding="0">						        
						        <tr>
						          <td><img src="tracking.png" width="128" height="29" border="0" NAME="but1" onClick="change(this)" /></td>
						        </tr> 
			             </table>
        </div>
    </body>
2

Dear Funktify,
Do you have the example of the toggle() then I can compare it with jQuery? Thank you.

3

You could also just use the toggle(), if you truly need a library. But Stephen is right, you can accomplish the same using basic JS with less overhead.

4

The plain JavaScript commands (without the huge JQuery library) are about as much code as that. It’s only if you want to start adding fadein/out or other animations that you would even consider adding jQuery to perform that task.

5

hi,
Have you tried this on jQuery? It should be easy. I actually had the same equation few weeks ago here check if an element is hidden in jquery

here are the simple codes you could use

to hide


$("#DIV_ID").hide();

to show


$("#DIV_ID").show();

basically if you would like to trigger a show or hide event from a click of a button, you can do something like this;


$("#BUTTON_ID").click(function(){
     $("#DIV_ID").show();
});

if you would like to interchange the effects on the same button, you can use the is:hidden selector to check whether an element is hidden or not and perform your action based on the output of your is:hidden function

something like this


$("#BUTTON_ID").click(function(){
     if($("#DIV_ID").is(":hidden")){
          $("#DIV_ID").show();
     }
     else{
          $("#DIV_ID").hide();
     }
});

you can also add some simple animations while hiding or showing your divs. these includes slideUp(), slideDown(), fadeIn(), fadeOut() among others.

this is how to apply simple animation on your code


$("#BUTTON_ID").click(function(){
     if($("#DIV_ID").is(":hidden")){
          $("#DIV_ID").fadeIn("slow");
     }
     else{
          $("#DIV_ID").fadeOut("slow");
     }
});

References:

http://api.jquery.com/show/
http://api.jquery.com/hide/