i need to show my DIV onClick and hide the other one (if showing) at the same position... coz of large number of DIVs , i can't use show 1 and hide 2, 3, 4 logic im using this code but it not working help required...
This line has error (inside hideDiv(n)): document.getElementById("div"+x).style.display = 'none' When calling the hide function you are passing "div1" as argument, therefore you get document.getElementById("divdiv1").style.display = 'none', which is wrong. What exactly do you want to achieve, should only 1 div be visible at all times?
yup u r right..(coz im not pasting the actual code!). anyway.. after re-arainging my code it will be : problem is that if user click on show div 1, and if div2 or div3 is displaying! it must become hidden and div1 become showing.. if user click on show div 2, and if div1 or div3 is showing then it become hidden and div2 become showing.... and so on.... keep in mind that i've not a limited number of Divs it may be 15 or 20 :| and this code is not working for me im using calling showDiv after hideDiv so the function first hide all div s then show the required but its not worked... then i've added document.getElementById(n).style.display = 'block' in hideDiv, but the result is same all div s become hidden onClick the link
Try this: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script> function showDiv(n) { document.getElementById("div"+n).style.display = 'block' return false; } function hideDiv(n) { for (x=1; x<=10; x++) { document.getElementById("div"+x).style.display = 'none' } document.getElementById(n).style.display = 'block' return false; } function toggleDiv(id) { for (x=1; x<=3; x++) { document.getElementById("div"+x).style.display = 'none'; } document.getElementById(id).style.display = 'block'; } </script> </head> <body> <table width="50%" border="1" cellspacing="0" cellpadding="0"> <tr> <td> <a href="#" onClick="toggleDiv('div1');return false;">show div 1</a> <a href="#" onClick="toggleDiv('div2');return false;">show div 2</a> <a href="#" onClick="toggleDiv('div3');return false;">show div 3</a> </td> </tr> <tr> <td> <div id="div1" style="display: none"> <table border=0 width=25% cellspacing="0" cellpadding="0"> <tr><td>this is div 1 contects</td></tr> </table> </div> <div id="div2" style="display: none"> <table border=0 width=25% cellspacing="0" cellpadding="0"> <tr><td>this is div 2 contects</td></tr> </table> </div> <div id="div3" style="display: none"> <table border=0 width=25% cellspacing="0" cellpadding="0"> <tr><td>this is div 3 contects</td></tr> </table> </div> </td> </tr> </table> </body> </html> Code (markup):
You don't need now showDiv and hideDiv now, you just use toggleDiv which hides all divs and then make the one you specified visible. It is imporant that x inside the for loop is total exact number of divs, otherwise you will get an js error and the script won't work. You could modify the code if you want and call hideAll() and then showDiv(id). If you have many divs and the script is too slow you could set global variable which would hold the id value of current visible div. Then you could call hideDiv() -> sets current visible div to display.none and then showDiv(id) -> sets current id to passed one and displays that div. That way you wouldn't need for loop anymore and the script would be faster as you would have only 1 hide and 1 unhide per function call.
obviously it will work fastly.. can u write this script for me wid global variable! ? coz i can understand just biggner level
if im not mistaking .. it'll be like this !!! <script> var holder=""; function toggleDiv(n) { document.getElementById(holder).style.display = 'none' document.getElementById(n).style.display = 'block' } </script> and links are <a href="#" onClick="holder='div1';toggleDiv('div1');return false;">show div 1</a> <a href="#" onClick="holder='div2';toggleDiv('div2');return false;">show div 2</a> <a href="#" onClick="holder='div3';toggleDiv('div3');return false;">show div 3</a> but its not hiding ... must be wrong in global variable :-s
Javascript: <script> var holder=""; function toggleDiv(id) { if (holder != "") { document.getElementById(holder).style.display = 'none'; } document.getElementById(id).style.display = 'block'; holder = id; } </script> Code (markup): HTML Part (it stays the same like before in my script version): <a href="#" onClick="toggleDiv('div1');return false;">show div 1</a> <a href="#" onClick="toggleDiv('div2');return false;">show div 2</a> <a href="#" onClick="toggleDiv('div3');return false;">show div 3</a> Code (markup):
Hi, Great suggestion, this is just what I was looking for to start off with. I have a question, however. I have basic understanding of javascript. I need to build a function that would achieve an effect similar to the one with build your own Mercedez car website. YOu can click on color thumbnail and it toggles that color image. Then you can click on wheel thumbnail and it adds a wheel image to the same are. The images are clear png's overlayed on top of each other. see this link (http://www.mbusa.com/mercedes/vehicles/build/class-CL/model-CL550C4) Toggle function seems like the way to go. The user clicks a button, it shows one image and hides the other ones. But then I want to have a new set of buttons, which also have hide/show functionality. When the user clicks a button within the second set, an image is show and other ones are hidden. But I ultimately want to be able to display two images within the same are upon pressing a button from two different sets. Any help would be highly appreciated!
Hi Sarah, these examples are 5 years old and lot has changed since then I suppose you could use jQuery to easily achieve what you want, with less code.