September 7, 2008 09:35pm pdt

1. hielo 141,888
2. Kravimir 97,400
3. Gertone 36,265
4. Steggs 28,550
5. b0lsc0tt 28,118
6. scrathcyboy 25,970
7. Xyptilon2 21,000
8. mr_egypt... 18,600
9. mplungjan 18,560
10. LordOfPo... 17,452
11. GreenGho... 16,875
12. jason1178 16,750
13. dbrunton 14,100
14. Rouchie 14,000
15. TName 12,500
16. Roonaan 12,097
17. mreuring 11,700
18. VirusMinus 11,300
19. xberry 10,750
20. glumlun 10,550
21. ali_kayahan 10,380
22. bluefezteam 10,075
23. araim 9,100
24. glcummins 9,000
25. Hube02 8,200

1. Gertone 624,257
2. rdcpro 333,594
3. hielo 145,488
4. TName 103,130
5. Kravimir 97,400
6. Steggs 95,320
7. dualsoul 94,078
8. Zvonko 85,717
9. VirusMinus 82,550
10. acperkins 80,890
11. mplungjan 75,336
12. b1xml2 68,850
13. CEHJ 63,873
14. COBOLdi... 54,942
15. carl_tawn 54,907
16. b0lsc0tt 53,584
17. TheLearn... 48,365
18. amit_g 47,844
19. sparkplug 42,065
20. Eternal_S... 42,050
21. Yury_Del... 39,106
22. jkmyoung 38,680
23. Roonaan 35,706
24. oceanbeach 35,600
25. GrandSch... 34,300

06.10.2008 at 06:59AM PDT, ID: 23472338

	[x] Attachment Details

Modify show/hide script to close a div when open a new one

Asked by danwpeters in Extensible HTML (XHTML), JavaScript, Cascading Style Sheets (CSS)

Tags: Javascript, CSS, XHTML

Hi,

I have a show/hide script that im using, using onmouseover to show/hide divs.

What I need help is, when user mouses over toggle2 link, it closes toggle1 div and opens toggle2 div, and so on.

At the moment all toggle divs will open and only close when you mouseover the toggle link again.

I have attached the full code im working on for ease of understanding.Start Free Trial

         
           
             1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:
36:
37:
38:
39:
40:
41:
42:
43:
44:
45:
46:
47:
48:
49:
50:
51:
52:

           
           
             <html><head>
<title>Rollover</title>
<style type="text/css">
.toggleBox {
	background: #ccc;
	margin: 10px 0;
	padding: 10px;
}
.toggleBox p.toggleLink {
	margin: 0;
	padding: 10px;
}
.toggleBox p.toggleLink a.link {
	text-decoration: underline;
	cursor: pointer;
}
.toggleBox .toggleContent {
	background: #fff;
	padding: 10px;
}
.toggleBox .toggleContent p {
	margin: 0;
}
</style>
<script type="text/javascript">
	function showhide(id){
		if (document.getElementById){
			obj = document.getElementById(id);
			if (obj.style.display == "none"){
				obj.style.display = "";
			} else {
				obj.style.display = "none";
			}
		}
	}
</script>
</head><body>
 
<div class="toggleBox">
	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover'); return(false);">Show/hide on mouseover</a></p>
	<div class="toggleContent" id="onmouseover">
		<p>On mouseover content toggle</p>
	</div>
</div>
 
<div class="toggleBox">
	<p class="toggleLink"><a class="link" onmouseover="showhide('onmouseover2'); return(false);">Show/hide on mouseover</a></p>
	<div class="toggleContent" id="onmouseover2">
		<p>On mouseover content toggle</p>
	</div>
</div>
</body></html>

           
         

Keywords: Modify show/hide script to close a div…

	Title
1	Show/ Hiding div (sort of a menu)
2	Hiding/Showing divs onclick
3	Toggle Div script not working
4	OnMouseOver
5	Hide and show DIV tags in table
6	onmouseout div control problem

Loading Advertisement...

20080716-EE-VQP-32 / EE_QW_2_20070628

Modify show/hide script to close a div when open a new one

Asked by danwpeters in Extensible HTML (XHTML), JavaScript, Cascading Style Sheets (CSS)

Tags: Javascript, CSS, XHTML

About this solution