Hey hope this helps,
function goes in heading
<head>
<script language="JavaScript">
<!--
function SwitchMenu(obj){
if(document.getElementById){
var el = document.getElementById(obj);
var ar = document.getElementById("cont").getElementsByTagName("DIV");
if(el.style.display == "none"){
for (var i=0; i<ar.length; i++){
ar[i].style.display = "none";
}
el.style.display = "block";
}else{
el.style.display = "none";
}
}
}
-->
</script>
</head>
in the body
<body>
<div id="cont">
<p id="menu1" onClick="SwitchMenu('sub1');" title="Data 1">View Data</p>
<div id="sub1" style="display:none;">
<a href="data1.htm" title="data1">data1<br>
<a href="data2.htm" title="data2">data2</div>
</body>
Then you can add some css to it so you can make it look good. Hope this helps.
mdawg
: I have a table contain data .I would like the table is hide , but when user click in its heading(or link ,button ...) It will be shown.
: Ex :
: Before click:
: Heading
: After click on Heading
: Heading
: data1 data2 data3
: data4 data5 data6....
:
: I tried to use table.style.display = 'none' and table.style.display = 'block'.
: It works well in IE .But in Netscape 4.x , nothing happen when I click in tables heading.
: How can I do ?
: Thanks!!!
:
: My code is like :
: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
: <HTML>
: <HEAD>
: <TITLE> New Document </TITLE>
: <META NAME="Generator" CONTENT="EditPlus">
: <META NAME="Author" CONTENT="">
: <META NAME="Keywords" CONTENT="">
: <META NAME="Description" CONTENT="">
: <script>
: function togle(){
: var table = document.getElementById('table2');
:
: if (table.style.display=='none'){
: table.style.display='block';
:
: }else{
: table.style.display='none';
: }
: }
: </script>
: </HEAD>
:
: <BODY>
: <a href="#" onClick="togle();">Show/Hide</a>
:
: TABLE1
: <table id="table1" border="1">
: <tr>
: <td>data1
: </td>
: <td>
: data2
: </td>
: </tr>
: <tr>
: <td>
: data3
: </td>
: <td>
: data4
: </td>
: </tr>
: </table>
:
: TABLE2
: <table id="table2" border="1">
: <tr>
: <td>data5
: </td>
: <td>
: data6
: </td>
: </tr>
: <tr>
: <td>
: data7
: </td>
: <td>
: data8
: </td>
: </tr>
: </table>
:
: TABLE3
: <table id="table2" border="1">
: <tr>
: <td>data9
: </td>
: <td>
: data10
: </td>
: </tr>
: <tr>
: <td>
: data11
: </td>
: <td>
: data12
: </td>
: </tr>
: </table>
:
: </BODY>
: </HTML>
:
:
:
