I have code to "Click & Expand Menus" within a Table
According to the requirement i need to have 2 Js.Files( 1. menu_function.js and 2. menu_table.js) & a HTML main page.
menu_function.js - function showOrHide(eId, thisImg, state) {
-
if (e = document.getElementById(eId)) {
-
if (state == null) {
-
state = e.style.display == 'none';
-
e.style.display = (state ? '' : 'none');
-
}
-
//...except for this, probably a better way of doing this, but it works at any rate...
-
if (state == true){
-
document.getElementById(thisImg).src="minus.png";
-
}
-
if (state == false){
-
document.getElementById(thisImg).src="plus.png";
-
}
-
}
-
}
-
//function to hide all "boxes"
-
function hideAll(){
-
document.getElementById('box1').style.display = 'none';
-
document.getElementById('box2').style.display = 'none';
-
document.getElementById('box3').style.display = 'none';
-
document.getElementById('box4').style.display = 'none';
-
document.getElementById('box5').style.display = 'none';
-
}
-
menu_table.js -
document.write('<table width="30%" border="0" cellspacing="0" cellpadding="10">' )
-
document.write('<tr>' )
-
document.write('<td width="30%">' )
-
document.write('<div id="menu">')
-
document.write('<a href= "sports.htm" class="itemLink"> Sports </a> ' )
-
document.write('<div id="box1"> this is some content for the first item!</div>' )
-
document.write('<a href="javascript:;" onclick="showOrHide(/"box2/", /"img2/")" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/> Item 2 </a>' )
-
document.write('<div id="box2"> <a href= "travel.htm">Travel</a><br/><a href= "egypt.htm" >Egypt</a></div>' )
-
document.write('<a href="javascript:;" onclick="showOrHide(/"box3/", /"img3/")" class="itemLink"><img src="plus.png" name="img3" width="10" height="10" border="0" id="img3"/> Item 3 </a>' )
-
document.write('<div id="box3"> this is some content for the second item!</div>' )
-
document.write('<a href="javascript:;" onclick="showOrHide(/"box4/", /"img4/")" class="itemLink"><img src="plus.png" name="img4" width="10" height="10" border="0" id="img4"/> Item 4 </a>' )
-
document.write('<div id="box4"> this is some content for the third item!</div>')
-
document.write('<a href="javascript:;" onclick="showOrHide(/"box5/", /"img5/")" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/> Item 5 </a>' )
-
document.write('<div id="box5"> this is some content for the fourth item!</div>')
-
document.write('</div>')
-
document.write('</td>')
-
document.write('</tr>')
-
document.write('</table>')
-
Now,
The HTML:
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu menu</title>
<script language="Javascript" type="text/javascript" src="menu_function.js">
</script>
<link rel="stylesheet" type="text/css" href="menu.css">
</head>
<body onload="hideAll();">
<script language="Javascript" type="text/javascript" src="menu_tab.js">
</script>
</body>
</html>[/HTML]
The problem is the submenus are not getting loaded.......when clicked on the menu...
If the js files are not included in the HTML it works fine:..here is the code
[HTML]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Menu menu</title>
<script language="Javascript" type="text/javascript">
<!--
//altered from example posted previously...
function showOrHide(eId, thisImg, state) {
if (e = document.getElementById(eId)) {
if (state == null) {
state = e.style.display == 'none';
e.style.display = (state ? '' : 'none');
}
//...except for this, probably a better way of doing this, but it works at any rate...
if (state == true){
document.getElementById(thisImg).src="minus.png";
}
if (state == false){
document.getElementById(thisImg).src="plus.png";
}
}
}
//function to hide all "boxes"
function hideAll(){
document.getElementById('box1').style.display = 'none';
document.getElementById('box2').style.display = 'none';
document.getElementById('box3').style.display = 'none';
document.getElementById('box4').style.display = 'none';
document.getElementById('box5').style.display = 'none';
}
//!-->
</script>
<style type="text/css">
<!--
/* styles for the links...*/
a.itemLink {
display: block;
font-family:Arial, Helvetica, sans-serif;
font-size:small;
background-color:#CCCCCC;
margin:5px;
padding:2px;
text-decoration: none;
}
/* top level container...*/
#menu {
position: relative;
width:250;
background-color:#999999;
padding:2px;
}
/* affects all divs in #menu*/
#menu div {
margin-left:25px;
margin-right:25px;
}
-->
</style>
</head>
<body onload="hideAll();">
<table width="30%" border="0" cellspacing="0" cellpadding="10">
<tr>
<td width="30%"><div id="menu"><a href= "sports.htm" class="itemLink"> Sports </a>
<div id="box1"> this is some content for the first item!</div>
<a href="javascript
:;" onclick="showOrHide('box2', 'img2')" class="itemLink"><img src="plus.png" name="img2" width="10" height="10" border="0" id="img2"/> Item 2 </a>
<div id="box2"> <a href= "travel.htm">Travel</a><br/>
<a href= "egypt.htm" >Egypt</a></div>
<a href="javascript
:;" onclick="showOrHide('box3', 'img3')" class="itemLink"><img src="plus.png" name="img3" width="10" height="10" border="0" id="img3"/> Item 3 </a>
<div id="box3"> this is some content for the second item!</div>
<a href="javascript
:;" onclick="showOrHide('box4', 'img4')" class="itemLink"><img src="plus.png" name="img4" width="10" height="10" border="0" id="img4"/> Item 4 </a>
<div id="box4"> this is some content for the third item!</div>
<a href="javascript
:;" onclick="showOrHide('box5', 'img5')" class="itemLink"><img src="plus.png" name="img5" width="10" height="10" border="0" id="img5"/> Item 5 </a>
<div id="box5"> this is some content for the fourth item!</div>
</div></td>
</tr>
</table>
</body>
</html>
[/HTML]
* I need to put the menu table in the js file...has im gonna use it in multiple pages*
Request to guide me what needs to be done......