By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
435,144 Members | 880 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 435,144 IT Pros & Developers. It's quick & easy.

show divs according to what the user clicks from a menu choice

P: 12
yeah i need some help(such a common line) ,i have a menu and each link has its own div respectively and yeah obviously when u click the link the div shows, the problem is i would like each div to show no matter how many times you click the link for it and if you click on another one and when u go back to the original , the div would still show. at the moment i have partially done that, i click on item a ,that shows then when i click item b that shows and if i go back to item a it shows again, but i can only get it 2 wrk like that with 2 divs how do i do it so it wrks with multiple divs , so if user comes n clicks on item b it'll show, if it click on item a it'll show n if it clicks on item c it'll show and if it was to revisit item a ,b or c they all will still show.
i am i beginner so please if i have many mistakes do understand, feel free to make any corrections or if you have any better ideas,thank you
i did some testing with the swapsee bit of code by adding div 3 and 4 onto the existing code on the first line and adjusting the rest of the code accordingly but it didnt work .
here some code,
the code includes the menu code and the divs and how i have partially achieved wht i wanted as i mentioned before using the swapsee function or element:


Expand|Select|Wrap|Line Numbers
  1. <body>
  2.  
  3.     <dl id="menu">
  4.  
  5.         <dt onclick="javascript:montre('smenu2');">Beds</dt>
  6.             <dd id="smenu2">
  7.     <ul>                    <li><a href="javascript:swapSee('metal','mydiv');" onmousedown="slidedown ('mydiv');">Divans</a></li>
  8.                     <li><a href="javascript:swapSee('mydiv','metal');" onmousedown="slidedown ('metal');">Metal</a></li>
  9.                     <li><a href="javascript:swapSee('bunk','pine');" onmousedown="slidedown ('pine');">Pine</a></li>
  10.                                         <li><a href="javascript:swapSee('pine','bunk');" onmousedown="slidedown ('bunk');">Bunk</a></li>
  11.  
  12.                 </ul>
  13.  
  14. </dl>
  15. </div>
  16.  
  17. <script type="text/javascript"> 
  18. <!-- 
  19. function swapSee(div1,div2){ 
  20. var seeUm=document.getElementById(div1); 
  21. var noSee=document.getElementById(div2);
  22. seeUm.style.visibility="hidden"; 
  23. noSee.style.visibility="visible"; 
  24. //--> 
  25. </script> 
  26.  
  27.  
  28. <div id="content">
  29. <div id="mydiv"
  30. style="display: none;
  31.        overflow: hidden;
  32.        height:520px; 
  33.        width: 740px;
  34.        overflow: scroll;
  35.       border-color: purple; 
  36.       background-color: lightgreen; 
  37.       border-style: solid; 
  38.       border-width: 1px; 
  39.       color: black; 
  40.       font-weight: bold;
  41.       div align: center;
  42.       position:absolute;
  43.       left:230px;
  44.        top:90px;
  45.       ">
  46.  
  47. <h2>Divans</h2>
  48. <a href="div.html#ortho">Orthopaedic Beds</a>&emsp;&emsp;<a href="div.html#">Semi-Orthopaedic Beds</a>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
  49. <p><A Name="ortho"></A>Orthopaedic</p>
  50.  
  51. <p>Venus ortho tufted</p>
  52. <a href="images\Venus.jpg" rel="lightbox" title="Venus">
  53. <IMG border="0" SRC="images\venus2.JPG" align="left"></a>Material: <br>Size: 14/ 360mm standard divan base height on 2 castors<br>Product Information: Spring edge divan base option available, drawer and slidestore options also available.
  54. <BR CLEAR="all">
  55. </div>
  56.  
  57. <div id ="metal"
  58. style="display: none;
  59.        overflow: hidden;
  60.        height:520px; 
  61.        width: 740px;
  62.        overflow: scroll;
  63.       border-color: purple; 
  64.       background-color: lightgreen; 
  65.       border-style: solid; 
  66.       border-width: 1px; 
  67.       color: black; 
  68.       font-weight: bold;
  69.       div align: center;
  70.       position:absolute;
  71.       left:230px;
  72.        top:90px;
  73.        ">
  74.  
  75. <h2>Metal</h2>
  76. <p>Waverly Single</p>
  77. <a href="images\Waverly Big.jpg" rel="lightbox" title="Waverly">
  78. <IMG border="0"  SRC="images\waverly.JPG" align="left"></a>
  79. <BR CLEAR="all">
  80. </div>
  81.  
  82. <div id ="pine"
  83. style="display: none;
  84.        overflow: hidden;
  85.        height:520px; 
  86.        width: 740px;
  87.        overflow: scroll;
  88.       border-color: purple; 
  89.       background-color: lightgreen; 
  90.       border-style: solid; 
  91.       border-width: 1px; 
  92.       color: black; 
  93.       font-weight: bold;
  94.       div align: center;
  95.       position:absolute;
  96.       left:230px;
  97.        top:90px;
  98.        ">
  99. <h2>Pine</h2>
  100.  
  101. <p>Barcelona Bed</p>
  102. <a href="images\barcelona.jpg" rel="lightbox" title="Barcelona">
  103. <IMG border="0" SRC="images\barc.JPG" align="left"></a>Material: Antique Pine<br>Sizes:<br>Product Information: This has a pine slatted base, with a choice of high or low foot end. Supplied flat packed only.
  104. <BR CLEAR="all">
  105.  
  106. </div>
  107.  
  108. <div id ="bunk"
  109. style="display: none;
  110.        overflow: hidden;
  111.        height:520px; 
  112.        width: 740px;
  113.        overflow: scroll;
  114.       border-color: purple; 
  115.       background-color: lightgreen; 
  116.       border-style: solid; 
  117.       border-width: 1px; 
  118.       color: black; 
  119.       font-weight: bold;
  120.       div align: center;
  121.       position:absolute;
  122.       left:230px;
  123.        top:90px;
  124.        ">
  125. <h2>Bunk</h2>
  126. <p>Atlas Bunk</p>
  127. <a href="images\atlasbunk.jpg" rel="lightbox" title="Atlas Bunk">
  128. <IMG border="0" SRC="images\atlas.JPG" align="left"></a>Material: Aluminium<br>Sizes: 3ft<br>Product Information: Bunk bed with wooden slatted base, can also be split into 2 single beds and mattress supplied separately. Supplied flat packed only.
  129. <BR CLEAR="all">
  130. </div>
  131.  
  132.  
Jan 15 '08 #1
Share this Question
Share on Google+
21 Replies


gits
Expert Mod 5K+
P: 5,333
hi ...

as far as i understand you want to display a special div when clicking a link and hide all other divs then. so you could adapt your function the following way:

Expand|Select|Wrap|Line Numbers
  1. function toggle_div_visibility(id) {
  2.     var div_list = document.getElementsByTagName('div');
  3.  
  4.     for (var i = 0, node; node = div_list[i]; i++) {
  5.         node.visibility = node.id == id ? 'visible' : 'hidden';
  6.     }
  7. }
now simply pass the id of the div you want to show to that function ... all other divs will be toggled to hidden ...

kind regards
Jan 15 '08 #2

P: 12
now simply pass the id of the div you want to show to that function ... all other divs will be toggled to hidden ..
wow never expected a reply so soon , thanks for the reply i have'nt tried it out yet but i will sure do ASAP, just one thing explain what u ment by the above quote ,i think i know what u mean but i thought i'd ask just in case , thanks.
Jan 16 '08 #3

gits
Expert Mod 5K+
P: 5,333
you pass the id of the div that has to be displayed ... and the function sets its visibility to visible while all! other divs will be set to be hidden.

kind regards
Jan 16 '08 #4

P: 12
you pass the id of the div that has to be displayed ... and the function sets its visibility to visible while all! other divs will be set to be hidden.

kind regards
ah i understand that now but how do i 'pass' the id of the div,sorry ,bit slow :)
Jan 16 '08 #5

P: 12
sorry,can you show me where you would put that code you gave using my code given above,i know its kinda getting you to do the work for me , its just that i won't understand until i see it like that,would you have to then change the code in the links too? because its like this at the moment:
Expand|Select|Wrap|Line Numbers
  1. <li><a href="javascript:swapsee('metal','mydiv');"
  2. onmousedown="slidedown ('mydiv');">Divans</a></li>
  3.  
Jan 16 '08 #6

gits
Expert Mod 5K+
P: 5,333
:) ok ... try this:

Expand|Select|Wrap|Line Numbers
  1. <a href="#" onclick="toggle_div_visibility('my_div');" onmousedown="slidedown ('mydiv');">Divans</a></li>
  2.  
kind regards
Jan 16 '08 #7

P: 12
hey thnks for replying, i tried the above ,it doesnt wrk,if i click on the links ,they all show the once but if i want to revisit them, they dnt show, it stays stuck on the last thing i clicked (confused!:( ).
Jan 16 '08 #8

gits
Expert Mod 5K+
P: 5,333
aaargh ... sorry my bad ...

error is here (instead of node.visibility use the following):

Expand|Select|Wrap|Line Numbers
  1. node.style.visibility = ...
have a look at the following example:

[HTML]<html>
<head>
<script type="text/javascript">
function toggle_div_visibility(id) {
var div_list = document.getElementsByTagName('div');

for (var i = 0, node; node = div_list[i]; i++) {
node.style.visibility = node.id == id ? 'visible' : 'hidden';
}
}
</script>
</head>
<body>
<div id="my_div1" style="visibility: hidden;">test 1</div>
<div id="my_div2" style="visibility: hidden;">test 2</div>
<div id="my_div3" style="visibility: hidden;">test 3</div>
<div id="my_div4" style="visibility: hidden;">test 4</div>
<div id="my_div5" style="visibility: hidden;">test 5</div>
<a href="#" onclick="toggle_div_visibility('my_div1');">test1</a>
<a href="#" onclick="toggle_div_visibility('my_div2');">test2</a>
<a href="#" onclick="toggle_div_visibility('my_div3');">test3</a>
<a href="#" onclick="toggle_div_visibility('my_div4');">test4</a>
<a href="#" onclick="toggle_div_visibility('my_div5');">test5</a>
</body>
</html>
[/HTML]
kind regards
Jan 16 '08 #9

P: 12
well the function works,only one problem it makes all the other divs that make up the layout of the page dissappear.....is there way so you can specifically tell the function to only hide the ones that are used as links im wondering...i tried adjusting the code my self but no success, actually thats no surprise considering im a beginner!
this is what i changed it to, it made sense to do it , i was looking at the div list bit so i thought if i give it a list, it might work, evidently it did not :(
i guess from a programming perspective , that code below wouldnt mean anything...
Expand|Select|Wrap|Line Numbers
  1. var div_list = document.getElementsById('mydiv','metal','pine','bunk');
Jan 17 '08 #10

gits
Expert Mod 5K+
P: 5,333
hi ...

we have to make a slight adaption :)

Expand|Select|Wrap|Line Numbers
  1. function toggle_div_visibility(id) {
  2.     var div_list = document.getElementsByTagName('div');
  3.  
  4.     for (var i = 0, node; node = div_list[i]; i++) {
  5.         if (node.id == id) {
  6.             node.style.visibility = 'visible';
  7.         } else if (node.className == 'whatever_name') {
  8.             node.style.visibility = 'hidden';
  9.         }
  10.     }
  11. }
  12.  
now give all the divs that should be affected by the function a class attribute with 'whatever_name' as value like in the following example:

[HTML]<div id="my_div1" style="visibility: hidden;" class="whatever_name">test 1</div>
[/HTML]
kind regards
Jan 17 '08 #11

P: 12
oh cool , thanks, havent tried it yet, will do and let you know how that goes.....
so close yet so far lol :)
Jan 18 '08 #12

P: 12
hey thanks worked really nicely, only theres another problem but it has nothing to do with the function,when i click on a link , the div for it comes up and then when another link is clicked the next div does comes up as well but below the previous one , how do i make it so it comes in the same place , they overlap or whatever....i tried myself by adding these properties to each div

Expand|Select|Wrap|Line Numbers
  1. <div id="mydiv"
  2. style="visibility: hidden;"
  3.  class="dbeds;
  4. div align: center;
  5.       position:absolute;
  6.       left:230px;
  7.        top:90px;
  8.       ">
but that didnt do anything , a z-index wouldnt be of much help neither would it?
Jan 18 '08 #13

gits
Expert Mod 5K+
P: 5,333
may be you could replace the visibility-property with display and use the corresponding values: 'none' for hidden and 'block' for visible ...

kind regards
Jan 18 '08 #14

P: 12
no change .....still does the same thing as before :(
Jan 18 '08 #15

gits
Expert Mod 5K+
P: 5,333
hmmm ... i thought you meant the following ... weren't you?

[HTML]<html>
<head>
<script type="text/javascript">
function toggle_div_visibility(id) {
var div_list = document.getElementsByTagName('div');

for (var i = 0, node; node = div_list[i]; i++) {
node.style.display = node.id == id ? 'block' : 'none';
}
}
</script>
</head>
<body>
<div id="my_div1" style="display: none;">test 1</div>
<div id="my_div2" style="display: none;">test 2</div>
<div id="my_div3" style="display: none;">test 3</div>
<div id="my_div4" style="display: none;">test 4</div>
<div id="my_div5" style="display: none;">test 5</div>
<a href="#" onclick="toggle_div_visibility('my_div1');">test1</a>
<a href="#" onclick="toggle_div_visibility('my_div2');">test2</a>
<a href="#" onclick="toggle_div_visibility('my_div3');">test3</a>
<a href="#" onclick="toggle_div_visibility('my_div4');">test4</a>
<a href="#" onclick="toggle_div_visibility('my_div5');">test5</a>
</body>
</html>
[/HTML]
kind regards
Jan 18 '08 #16

P: 12
yea i changed it to that but it still works the same way as before, the divs show under each other when clicked , i want them to show over each other when clicked so if i click item a that'll come up , then if i click item b that should come up in the exact same place and item a should dissappear
Jan 18 '08 #17

gits
Expert Mod 5K+
P: 5,333
hmmm ... please show your code ... the above example works exactly that way ... so may be you have something other to fix ...

kind regards
Jan 18 '08 #18

P: 12
ok here it is:
Expand|Select|Wrap|Line Numbers
  1. <script type="text/javascript"> 
  2. <!-- 
  3. function toggle_div_visibility(id) {
  4.     var div_list = document.getElementsByTagName('div');
  5.  
  6.     for (var i = 0, node; node = div_list[i]; i++) {
  7.         if (node.id == id) {
  8.             node.style.display = 'block';
  9.         } else if (node.className == 'dbeds') {
  10.             node.style.display = 'none';
  11.         }
  12.     }
  13. }
  14.  
  15. //--> 
  16. </script> 
  17.  
  18. <div id="mydiv"
  19. style="display: none;" 
  20. class="dbeds;
  21. height:520px; 
  22.  width: 740px;
  23.   overflow: scroll;
  24.   color: black; 
  25.        font-weight: bold;"> Divans </div>
  26.  
  27. <div id="mydiv2"
  28. style="display: none;" 
  29. class="dbeds;
  30. height:520px; 
  31.  width: 740px;
  32.   overflow: scroll;
  33.   color: black; 
  34.        font-weight: bold;"> <h2>Divans</h2>   </div>
  35.  
  36.  <a href="#" onclick="toggle_div_visibility('mydiv');">Divans</a>
  37. <a href="#" onclick="toggle_div_visibility('mydiv2');">Divans2</a>
  38.  
Jan 18 '08 #19

gits
Expert Mod 5K+
P: 5,333
have a look at your class-attribute ... it has to be:

[HTML]<div id="mydiv" style="display: none; height:520px; width: 740px; overflow: scroll; color: black; font-weight: bold;" class="dbeds"> Divans </div>[/HTML]
kind regards
Jan 18 '08 #20

P: 12
hey, thanks for that,it worked great! now just gonna check if its okay in all other browsers....!! thanks for the help!
Jan 18 '08 #21

gits
Expert Mod 5K+
P: 5,333
:) no problem ... post back to the forum in case you have more questions

kind regards
Jan 18 '08 #22

Post your reply

Sign in to post your reply or Sign up for a free account.