Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations John Tel on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Help with hide/show javascript

Status
Not open for further replies.
meckeard

meckeard

Programmer
Aug 17, 2001
619
US
Hi all,

I have 2 tables in my web page like this:

<table id="tblTable1" style="display: none;"></table>
<table id="tblTable2" style="display: none;"></table>

What javascript code could I use to hide and show them?

Here is what I had prior to some changes but it no longer works:

document.getElementById("tblTable1").style.visibility='visible';

document.getElementById("tblTable2").style.visibility='hidden';

Thanks.
 
Sort by date Sort by votes
thread215-1130013

This thread is posted here from this previous post in the HTML forum.

Meckeard, I don't think you fully tested my code if you think it doesn't do what you need it to. There are 2 ways to hide an HTML element. Toggle either visibility or display. My example post in the HTML forum gave you an example of both. Copy/Paste that code into a new HTML file to see the behaviors of both. I'm guessing you want to use display from your explanation, but to be quite honest you have me somewhat confused after your "hand" example.

Try my code again thoroughly and post back here please.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
headbang.gif
[rockband]
headbang.gif
 
Upvote 0 Downvote
kaht,

You are correct, I did fully understand the second code sample. It's close to what I need. Let me explain.

When the page loads, I need both tables to occupy the same space and not be seen. Once the button is clicked, I need 1 of the 2 tables to appear. But they both must be hidden when the page loads and appear to be "stacked" on top of each other. Think of it as the same as stacking papers into a pile. I don't care how high the pile is, just that it only takes up a space of 8x11 on my desk.

I hope I'm able to clarify what I am hoping to achieve.

Thanks.
 
Upvote 0 Downvote
Set the display:none property on the two tables as you already do in your example. Then place a single div around both tables and give that div a width and height (this makes the "8x11 space on your desk").

You can now show/hide one of the tables at a time... with the knowledge that the "8x11" space is pre-allocated.
Code: 
<div id="eight_by_eleven" style="width:8em;height:11em;">
<table id="tblTable1" style="display: none;"></table>
<table id="tblTable2" style="display: none;"></table>
</div>
Hope that works for you [smile]

Cheers,
Jeff

[tt]Jeff's Page [/tt][tt]@[/tt][tt] Code Couch
[/tt]
 
Upvote 0 Downvote
I guess I just don't understand what the confusion is. Given the information we have supplied for you, and the specs that you know you need to achieve, where does the problem lie?

You know that you have to use the display style (instead of visibility) for an item to be removed completely off the page, freeing up it's space it once held. This should be a simple task of toggling the display status on the 2 tables and declaring them right next to eachother.

I have already provided a working example that shows how the "display" behavior works, but I typed out this one last thing. If this will not help you work out your problem then I suggest you read a few tutorials, because this problem should have been solved after clflava's posts in the HTML forum when he suggested to use display:none.
Code: 
<script language="javascript">
function swapTables(bool) {
   document.getElementById("table1").style.display = (bool) ? "block" : "none";
   document.getElementById("table2").style.display = (bool) ? "none" : "block";
}
</script>
<style type="text/css">
table {
   width:400px;
   height:400px;
   display:none;
}
td {
   text-align:center;
   background-color:#ffffff;
}
</style>
<body>
<div style="float:left">
   <input type="radio" name="blahRadio" onclick="swapTables(true)">Show Table1<br>
   <input type="radio" name="blahRadio" onclick="swapTables(false)">Show Table2
</div>
<div style="height:420px; width:420px; border:5px solid #000000; padding:5px">
   <table id="table1" style="background-color:#0000ff" border="0" cellpadding="1">
      <tr><td>Hello, I am table1</td></tr>
   </table>
   <table id="table2" style="background-color:#ff0000" border="0" cellpadding="1">
      <tr><td>Hello, I am table2</td></tr>
   </table>
</div>
</body>

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
headbang.gif
[rockband]
headbang.gif
 
Upvote 0 Downvote
The problem lies in my inability to effectively explain what I am trying to accomplish. Face to face would be easier that trying to describe something virtual.

I found the solution by your postings and some trial and error. I removed the id's from the tables and wrapped them both with div tags and it worked great.
 
Upvote 0 Downvote
kaht's example above is exactly what I was trying to achieve. Though I am trying to toggle between four different tables instead of two. Forgive me for my lack of knowledge with javascript. What are the definitions for "block" and "none"?

Any help or suggestions?

Thanks
 
Upvote 0 Downvote
I see this thread got all chopped up.

-kaht

...looks like you don't have a job, so why don't you get out there and feed Tina.
headbang.gif
[rockband]
headbang.gif
 
Upvote 0 Downvote
Thanks, cLFlaVA

My apologies for I could have researched that myself. Sometimes too quick to post instead of putting more thought into it.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
774
lexer
lexer
Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
997
Kennelbloke
Kennelbloke
Mike Lewis
  • Locked
  • Question
Anyone here got any experience of Grid.JS (a sortable Javascript grid) 1
Replies
5
Views
2K
Mike Lewis
Mike Lewis
JScannell
  • Locked
  • Question
Javascript events
Replies
1
Views
380
Daniel K
Daniel K
Marclem
  • Question
javascript:navigator.registerProtocolHandler
Replies
1
Views
361
Marclem
Marclem

Part and Inventory Search

Sponsor

Back
Top