<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!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 runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
var name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
//$(newboxes[x]).slideToggle(1000);
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader5" href="javascript:showonlyone('newboxes5');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader6" href="javascript:showonlyone('newboxes6');" >collapse</a>
</div>
</td>
</tr>
<tr><td colspan="3">
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #1</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
<div class="newboxes" id="newboxes4" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #4</div>
<div class="newboxes" id="newboxes5" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #5</div>
<div class="newboxes" id="newboxes6" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #6</div>
</td></tr>
</table>
</form>
</body>
</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 runat="server">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function showonlyone(thechosenone) {
var newboxes = document.getElementsByTagName("div");
for (var x = 0; x < newboxes.length; x++) {
var name = newboxes[x].getAttribute("class");
if (name == 'newboxes') {
if (newboxes[x].id == thechosenone) {
newboxes[x].style.display = 'block';
//$(newboxes[x]).slideToggle(1000);
}
else {
newboxes[x].style.display = 'none';
}
}
}
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader1" href="javascript:showonlyone('newboxes1');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader2" href="javascript:showonlyone('newboxes2');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader3" href="javascript:showonlyone('newboxes3');" >collapse</a>
</div>
</td>
</tr>
<tr>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader4" href="javascript:showonlyone('newboxes4');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader5" href="javascript:showonlyone('newboxes5');" >collapse</a>
</div>
</td>
<td>
<div style="border: 1px solid blue; background-color: #99CCFF; padding: 5px;">
<a id="myHeader6" href="javascript:showonlyone('newboxes6');" >collapse</a>
</div>
</td>
</tr>
<tr><td colspan="3">
<div class="newboxes" id="newboxes1" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #1</div>
<div class="newboxes" id="newboxes2" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #2</div>
<div class="newboxes" id="newboxes3" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #3</div>
<div class="newboxes" id="newboxes4" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #4</div>
<div class="newboxes" id="newboxes5" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #5</div>
<div class="newboxes" id="newboxes6" style="border: 1px solid black; background-color: #CCCCCC; display: none;padding: 5px;">Div #6</div>
</td></tr>
</table>
</form>
</body>
</html>
No comments:
Post a Comment