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 wOOdy-Soft on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Hide/Show Table & Image Swap. 3

Status
Not open for further replies.
TMac42

TMac42

Programmer
Jul 24, 2000
83
US
I have one table that gets displayed every time a page is refreshed and another two tables below that. I have a + graphic in the first table that allows the user to expand and display the bottom two tables that are wrapped with <DIV> tags. I have an anchor tag wrapped around the image that calls a JS function that basically toggles the display off/on.

So far, the page works well with two exceptions:

1) I want to swap the + image for a - whenever the user clicks on it. Ideally I could build this into my ToggleDisplay function that hides the bottom two tables.

2) When you load or refresh the page, it automatically displays all 3 tables when in reality I want to show just the first one and then have the user determine if the extra tables should be displayed.

Any input is much appreciated.
 
Sort by date Sort by votes

How are you calling the toggle function (what syntax are you using)? You would amend this to pass in the current image filename, and pick up on that in the toggle function (posting this would also be useful).

For the second question, just give the DIVs an initial style (either inline, or in your CSS with a class).

Hope this helps,
Dan


[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote

Solve number 2 by placing this into the 2 table definitions that you want to be hidden initially:

Code: 
<table style="display:none;">

Cheers,
Jeff

 
Upvote 0 Downvote
This is how I'm doing the toggle of the bottom two tables:

Note: this is from ASP response.write sequence...

Code: 
<a title=""Show Tables"" href=""javascript:toggleDisplay('" & DIVid & "')""><IMG BORDER=""0"" SRC=""plus.gif""></A>

and here is the toggleDisplay function code I'm using for this...

Code: 
<script language="javascript">
function toggleDisplay(e){
	element = document.getElementById(e).style;
	element.display == 'none' ? element.display = 'block' : 
	element.display='none';
	swapImage
}
</script>

Thanks a bunch.
 
Upvote 0 Downvote
Ohh.. and swapImage in there was just something I was trying as a test that didn't work. Sorry about including that.
 
Upvote 0 Downvote
Jeff, when I used...

Code: 
<table style="display:none;">

It works great when the page loads but my click to show those tables no longer works. I assume because I'm missing something in my toggleDisplay above that would set the property to visible. The key though is that I need to able to flip back and forth - showing the tables/hiding the tables with the click.

Thanks again.
 
Upvote 0 Downvote

This example shows how you can show/hide something with an id (in this case a table -- but it could be any block element without modifying the code). It also updates the link html to reflect this change (and provide a means to reverse the change).

Add this small Javascript function to a page:
Code: 
<script type="text/javascript">
<!--
function showHide(_myObj,_action) {
	var _myTableObj = document.getElementById((_myObj.parentNode.id).substring(0,(_myObj.parentNode.id).indexOf('_')));
	if (_action == 'show') {
		_myTableObj.style.display = 'block';
		_myObj.parentNode.innerHTML = '<a href="#" onclick="showHide(this,\'hide\');">Hide Table</a>';
	}
	if (_action == 'hide') {
		_myTableObj.style.display = 'none';
		_myObj.parentNode.innerHTML = '<a href="#" onclick="showHide(this,\'show\');">Show Table</a>';
	}
}
//-->
</script>

And then set up some HTML like this:
Code: 
<body>

<div id="tableID[COLOR=red]1[/color]_Div"><a href="#" onclick="showHide(this,'hide');">Hide Table</a></div>
<table id="tableID[COLOR=red]1[/color]" style="display:block;">
<tr><td>Sample Table 1</td></tr>
</table>

<div id="tableID[COLOR=red]2[/color]_Div"><a href="#" onclick="showHide(this,'show');">Show Table</a></div>
<table id="tableID[COLOR=red]2[/color]" style="display:none;">
<tr><td>Sample Table 2</td></tr>
</table>

</body>

I have hilighted in red the important parts to change per table. Have a look at it and see what you think.

Jeff

 
Upvote 0 Downvote

this applies to your situation:

Code: 
<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageX=='plus') {document.getElementById('imagePM').src='minus.bmp';}
 else {document.getElementById('imagePM').src='plus.bmp';}
}
</script>
<a title="Show Tables" href="javascript:toggleDisplay('table1')"><img border="0" src="plus.bmp" id=imagePM></a>
<table>
<tr>
<td>alway show this table
</td>
</tr>
</table>
<div style="display:none;" id=table1>
<table>
<tr>
<td>table one</td>
</tr>
</table>
</div>

this effectively shows/hides a table, and changes the plus/minus image accordingly.

as far as the other tables to show/hide, how would you want them to be toggled? would you have another plus/minus image for each of the other tables?

hope that helps.

- g
 
Upvote 0 Downvote

Part II -

sorry...forgot to set the imageX variable each time...

new code:

Code: 
<script language="javascript">
imageX='plus';
function toggleDisplay(e){
element = document.getElementById(e).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageX=='plus') {document.getElementById('imagePM').src='minus.bmp';imageX='minus';}
 else {document.getElementById('imagePM').src='plus.bmp';imageX='plus';}
}
</script>
<a title="Show Tables" href="javascript:toggleDisplay('table1')"><img border="0" src="plus.bmp" id=imagePM></a>
<table>
<tr>
<td>alway show this table
</td>
</tr>
</table>
<div style="display:none;" id=table1>
<table>
<tr>
<td>table one</td>
</tr>
</table>
</div>

what do you think?

- g
 
Upvote 0 Downvote
spewn - good stuff! I only have one more tweak to get this wrapped up.

I can have multiple "sets" of these tables. So, when I change imagePM in the code you provided, it always changes only the first plus image. Example:

'set one
table 1 - always shown (w/ plus image)
table 2 - only shown when plus image is clicked

'set two
table 1 - always shown (w/ plus image)
table 2 - only shown when plus image is clicked (set two plus image)

So as I say....currently if I click the plus image in the second set, that plus image remains but the plus image from set one changes to a minus. I can see that this is due to imagePM being the same for every set, just not sure how to get syntax right to get it to alternate for each set.
 
Upvote 0 Downvote

The example I posted previously supports ( and indeed shows as an example) multiple tables. You can easily extend my example to use images of a plus and minus - single line. Maybe you missed it... I posted right before spewn :)

Cheers,
Jeff

 
Upvote 0 Downvote
here is the revised code to account for multiple tables...

Code: 
<script language="javascript">

imageX1='plus';
imageX2='plus';
imageX3='plus';

function toggleDisplay(e){
imgX="imagePM"+e;
tableX="table"+e;
imageX="imageX"+e;
tableLink="tableHref"+e;
imageXval=eval("imageX"+e);
element = document.getElementById(tableX).style;
 if (element.display=='none') {element.display='block';}
 else {element.display='none';}
 if (imageXval=='plus') {document.getElementById(imgX).src='minus.bmp';eval("imageX"+e+"='minus';");document.getElementById(tableLink).title='Hide Table #'+e+'a';}
 else {document.getElementById(imgX).src='plus.bmp';eval("imageX"+e+"='plus';");document.getElementById(tableLink).title='Show Table #'+e+'a';}
}
</script>
<a title="Show Table #1a" href="javascript:toggleDisplay('1')" id=tableHref1><img border="0" src="plus.bmp" id=imagePM1></a>
<table>
<tr>
<td>always show this table #1
</td>
</tr>
</table>
<div style="display:none;" id=table1>
<table>
<tr>
<td>table 1a</td>
</tr>
</table>
</div>

<a title="Show Table #2a" href="javascript:toggleDisplay('2')" id=tableHref2><img border="0" src="plus.bmp" id=imagePM2></a>
<table>
<tr>
<td>always show this table #2
</td>
</tr>
</table>
<div style="display:none;" id=table2>
<table>
<tr>
<td>table 2a</td>
</tr>
</table>
</div>

<a title="Show Table #3a" href="javascript:toggleDisplay('3')" id=tableHref3><img border="0" src="plus.bmp" id=imagePM3></a>
<table>
<tr>
<td>always show this table #3
</td>
</tr>
</table>
<div style="display:none;" id=table3>
<table>
<tr>
<td>table 3a</td>
</tr>
</table>
</div>

to add new tables, you would just increment the trailing number on all the id's...then add the imageX#='plus' variable in the beginning of the javascript.

hope that helps.

- g
 
Upvote 0 Downvote
Jeffy, great stuff. You got a star too. What about an addition to yours that would also allow me to use a text link next to the plus/minus graphic that also expands/collapses the display and changes the plus/minus graphic at the same time??

(still for multiple tables)

I started with spewn's code at first but it was stopping an animated gif on the page during onclick so I am now playing around with Jeffy's code. Both work well though.

THANKS GUYS!
 
Upvote 0 Downvote
Jeffy, great stuff. You got a star too. What about an addition to yours that would also allow me to use a text link next to the plus/minus graphic
Click to expand...

Jeff's code already has text links - look in the showHide function inside the anchor elements.

If you want text and images, simply put both text and images inside the anchor.

Dan

[tt]D'ya think I got where I am today because I dress like Peter Pan here?[/tt]
[banghead]

 
Upvote 0 Downvote
Sorry...maybe I didn't elaborate enough. The only difference is that the text I'm needing there is dynamic because it's a header title, for example. So rather than "hide table"/"show table", my header might say "Joe Adams" and to view expand or collapse on his details you could click on his name. So, I'm guessing that I have to pass that string into the function but it's getting the function to write that string rather than the "hide table"/"show table" that I'm not certain of syntax on.

Thanks!
 
Upvote 0 Downvote

what do you mean my example is stopping an animated gif?

as far as dynamically presenting text on screen is fairly easy...you just name the area you want the text to change in and issue a command to change it.

here's an example how to affect text onscreen:

Code: 
<script>
function changeText() {document.getElementById('textChange').innerHTML='New Text Here';}
</script>
<span id=textChange>Text Onload</span><br>
<input type=button onclick=changeText(); value='change text'>

how do you get the text you want to appear as the link/header? is it already known, or is that dynamically acheived, too?

- g
 
Upvote 0 Downvote
The header info changes all of the time.. it's dynamic and coming from a database so I need to feed it in to the function. Each set of tables will have a different name above it.

Think of it this way...

+ John Doe
table 1 (info for Doe, hidden on page open)
table 2 (info for Doe, hidden on page open)

+ Jim Doe
table 1 (info for jim doe, hidden on page open)
table 2 (info for jim doe, hidden on page open)

so when we click on either the + or "John Doe", John's tables appear and the minus graphic appears but his name remains the same.
 
Upvote 0 Downvote

i understand that part (form), but exactly how are you retrieving the header info from the DB...is it server side?

if server side, then set the variable in javascript as the page is displayed, pulling the value from the database...

for instance, i write my pages in perl...this allows me to gather all the server side info, and then write that into my html page on the fly...

if the tables all follow the same structure, just the content changes, you could write a script that generates each table dynamically, a table (or 2, or 3, etc) for each header name...this is the easiest way, since you can then insert all the info from DB into an array and then access each element into appropriate table area...

tell me what "I started with spewn's code at first but it was stopping an animated gif on the page during onclick" means and if i can be fixed/edited, i'll revise my original code to use dynamic tables...i also need to know how you will retrieve info from DB.

- g
 
Upvote 0 Downvote
When I was using the code earlier, it would stop the animated gif from running when I clicked on any of the + links to expand the info.

I am building my pages dynamically on the fly so I can write out different variables along the way.

Thanks for your help and patience. MUCH appreciated.
 
Upvote 0 Downvote
spewn - your code from above at: 20 May 05 4:09
works great with the exception of having the imageX pre-defined at the top for 3 sets of tables. I won't know how many I'll have and that number can/will vary. So if we can figure that part out... I think I should be good to go.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Kennelbloke
  • Locked
  • Question
Can't Get Markers to show on Map
Replies
0
Views
1K
Kennelbloke
Kennelbloke
lexer
  • Locked
  • Question
Passing fields from (html-JavaScript) table to JavaScript Function
Replies
0
Views
807
lexer
lexer
jomat
  • Locked
  • Question
JS to show the timer in html under title instead of in the status bar
Replies
2
Views
921
xwb
xwb
malpa
  • Locked
  • Question
Graph the selection of a html table row
Replies
0
Views
824
malpa
malpa
coldbohemia
  • Locked
  • Question
jquery function always returns contents of the same table cell, no matter which table cell i click
Replies
0
Views
738
coldbohemia
coldbohemia

Part and Inventory Search

Sponsor

Back
Top