As you can see, I've changed the code a little bit. The "
Table1" becomes now "
DropDownTable" and there are 2 new functions:
showTable() and
hideTable().
As
Exam said, there should be a function which will check to see if the click comes from inside/outside the DropDownTable and then take the proper action (hide the table if visible).
This is just a naive implementation but it works...[and I think it's ok, as long as I'm not a JavaScript guru
and I hope that this solves your problem for the moment, at least until you'll find a better implementation].
The issue here is that you have to add the "onclick" event for each of your page containers, except the main container (as you see in my example).
Quote:
|
This is very important, because if you add the "onclick" event to the parent container of your table, then it won't work, so be careful with that.
|
In this example the "MainPageContainer" is the parent of "DropDownTable" so it hasn't the "onclick" event set.
Code:
<head>
<script type="text/javascript" language="javascript">
<!--
var element;
var state = false;
function showTable() {
element = document.getElementById('DropDownTable').style;
return element.display = 'block';
}
function hideTable() {
element = document.getElementById('DropDownTable').style;
return element.display = 'none';
}
function toggle() {
element = document.getElementById('DropDownTable').style;
if (element.display == 'none')
{
// Show the table
element.display = showTable();
state = true;
}
else
{
// Hide the table
element.display = hideTable();
state = false;
}
return state;
}
function externalClick() {
hideTable();
}
//-->
</script>
</head>
Code:
<body>
<div id="MainPageContainer">
<img id="ExpandViewImage" height="25" onclick="toggle();" src="Expand.png" style="cursor: hand;"
width="25" />
<br />
<table id="DropDownTable" cellpadding="5" cellspacing="0" style="display: none;">
<tr>
<td style="height: 200px; width: 250px;">
This is the content of the DropDownTable</td>
</tr>
</table>
<br />
<br />
<div id="PageSubContainer1" onclick="externalClick();" style="width: 100%; height: 100px;
background-color: #696969;">
<br />
Add content here | Add content here
<br />
<div id="Container1">
no need to call the javascript function here
</div>
</div>
<div id="PageSubContainer2" onclick="externalClick();" style="width: 100%; height: 100px;
background-color: #808080;">
<br />
Add content here | Add content here
<br />
<div id="Container2">
no need to call the javascript function here
</div>
</div>
</div>
</body>