Hi
Hi,
Please find the attached HTML Source Code. I was able to achieve Collapsing/Expand at Project Level but not at the vendor level. However, same HTML works fine with IE 8 and FF. The Expand/Collapse at the Vendor Level fails with XHMTL Strict 1.0 and IE 7.
Can any one please help?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns:o="urn:schemas-microsoft-com:office:office" lang="en-us" dir="ltr">
<head><meta http-equiv="X-UA-Compatible" content="IE=8" /><meta name="GENERATOR" content="Microsoft SharePoint" /><meta name="progid" content="SharePoint.WebPartPage.Document" /><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><meta http-equiv="Expires" content="0" /><title>
Dashboard
</title>
</head>
<body>
<script type="text/javascript" xmlns="http://www.w3.org/1999xhtml/1999">
function toggleFacRow(rowID) {
var facRow = document.getElementById('facRow_' + rowID);
var facButton = document.getElementById('facButton_' + rowID);
if (facRow.style.display != 'block') {
facRow.style.display = "block";
facButton.src = "_layouts/images/TPCOL.gif";
} else {
facRow.style.display = "none";
facButton.src = "_layouts/images/TPEXP.gif";
}
}
function toggleVenRow(VenrowID) {
var VenRow = document.getElementById('VenRow_' + VenrowID);
var VenButton = document.getElementById('VenButton_' + VenrowID);
if (VenRow.style.display != 'block') {
VenRow.style.display = "block";
VenButton.src = "_layouts/images/TPCOL.gif";
} else {
VenRow.style.display = "none";
VenButton.src = "_layouts/images/TPEXP.gif";
}
}
</script>
<style type="text/css" xmlns="http://www.w3.org/1999xhtml/1999">
.mwh-c {
text-align:center;
}
.mwh-h {
border-bottom:1px solid silver;
}
</style>
<table border="0" width="100%" cellpadding="3" cellspacing="0" xmlns="http://www.w3.org/1999xhtml/1999">
<tr>
<td class="tableHeader" colspan="2">Project Name</td>
<td class="tableHeader"> </td>
<td class="tableHeader"> </td>
<td class="tableHeader"> </td>
<td class="tableHeader"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td valign="top">
<a href="javascript:toggleFacRow('mwh1')">
<img id="facButton_mwh1" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="row_mwh1" />Project A</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="facRow_mwh1" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Vendor</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td valign="top">
<a href="javascript:toggleVenRow('mwh1')">
<img id="VenButton_mwh1" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="VenRow_mwh1" />Vendor 1</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="VenRow_mwh1" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Status Date</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td class="ms-vb">7/7/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr>
<td class="ms-vb">7/8/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<a href="javascript:toggleVenRow('mwh2')">
<img id="VenButton_mwh2" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="VenRow_mwh2" />Vendor 2
</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="VenRow_mwh2" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Status Date</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td class="ms-vb">7/7/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr>
<td class="ms-vb">7/8/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<a href="javascript:toggleFacRow('mwh3')">
<img id="facButton_mwh3" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="row_mwh3" />Project B</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="facRow_mwh3" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Vendor</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td valign="top">
<a href="javascript:toggleVenRow('mwh3')">
<img id="VenButton_mwh3" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="VenRow_mwh3" />Vendor 1</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="VenRow_mwh3" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Status Date</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td class="ms-vb">7/7/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr>
<td class="ms-vb">7/8/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
</table>
</td>
</tr>
<tr>
<td valign="top">
<a href="javascript:toggleVenRow('mwh4')">
<img id="VenButton_mwh4" src="_layouts/images/tpexp.gif" height="11px" width="11px" border="0" />
</a>
</td>
<td class="ms-vb">
<a name="VenRow_mwh4" />Vendor 2</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="VenRow_mwh4" style="display:none;">
<td colspan="6">
<table style="border:1px solid silver;" cellspacing="0" border="0" width="100%">
<tr>
<td class="ms-vb" colspan="2">Status Date</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr bgcolor="#f8f8ff">
<td class="ms-vb">7/7/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr>
<td class="ms-vb">7/8/2010</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
<tr bgcolor="#f8f8ff">
<td valign="top">
</td>
<td class="ms-vb">
</td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
<td class="ms-vb"> </td>
</tr>
<tr id="facRow_mwh5" style="display:none;">
<td colspan="6">
</td>
</tr>
</table>
</body>
</html>