I am trying to hide tables when a page initially loads and only display them when a button is pressed. When the page loads the tables show and I need then to be hidden. What am I doing wrong? I am new to this.

Here is the code that I have so far.

<Script = text/javascript>

function show_hide(tblid, show) {
if (tbl = document.getElementById(tblid)) {
if (null == show) show = tbl.style.display == 'none';
tbl.style.display = (show ? '' : 'none');

function initHiddenTable(tableId){
	var tbl = document.getElementById(tableId);
	if(tbl) {
		//1. Generate +/- control
		var a = document.createElement('a');
		a.setAttribute('href', '');
		a.onclick = function(){
			return false;
		var txt = document.createtextNode('+/-');
		tbl.parentNode.insertBefore(a, tbl);
		//2. Hide Table
		if(tbl) { tbl.style.display = 'none'; }

onload = function hide(){
	var hideTables = ["exampletbl", "exampletbl2"];
	for(var i=0; i<hideTables.length; i++){

<form onload="hide('exampletbl'); hide('exampletbl2');">


<td><input type="button" Name="Tagsearch" Value="Block 8" onclick="show_hide('exampletbl')" /><td>
<td><input type="button" Name="Tagsearch" Value="Block 9" onclick="show_hide('exampletbl2')" /><td>

<div style="margin-top:12px;">
<table id="exampletbl">
<tr><td>row 1</td></tr>
<tr><td>row 2</td></tr>

<div style="margin-top:12px;">
<table id="exampletbl2">
<tr><td>row 3</td></tr>
<tr><td>row 4</td></tr>


Any help would be appreciated.



display them when a button is pressed

you do something like this:

<input type="button" value="clickMe" onclick="document.getElementById('111').style.display='inline'" />

and the table:

<table id="111" style="display:none">
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, learning, and sharing knowledge.