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

Layer visiblility onClick 1

Status
Not open for further replies.
vionca

vionca

MIS
Nov 19, 2003
60
US
Hi,

I'm trying to get a link working that will change a layer's visibility to visible from hidden when a link is clicked. Does anyone happen to have this code? I've tried combining snippets of onClicks and layer visiblity scripts with no success.

Could anyone help?
vionca
 
Sort by date Sort by votes

try the first few hits. they are all good examples with working scripts

_____________________________________________________________________
onpnt2.gif

Hakuna matata!!
 
Upvote 0 Downvote
vionca,

Pretty cool what you can do with an elements style.

Code: 
<html><head><title>Hiding IDs</title>
<script language=&quot;Javascript&quot;>
var first = 1;
var last = 1;
function mkv(num) {
  document.getElementById(&quot;layer&quot;+num).style.visibility = 'visible';
}
function mkh(num) {
  document.getElementById(&quot;layer&quot;+num).style.visibility = 'hidden';
}
</script></head><body>
<hr align=&quot;center&quot; width=&quot;60%&quot; size=&quot;1&quot;>
<span align=&quot;left&quot; id=&quot;layer1&quot;>
This is the first span it's id is layer1.</span><br>
<span align=&quot;center&quot; id=&quot;layer2&quot; style=&quot;visibility: hidden;&quot;>
This is the second span it's id is layer2.</span>
<br><br>
<a href=&quot;javascript:mkv(1)&quot;>Show Layer1</a><br>
<a href=&quot;javascript:mkh(1)&quot;>Hide Layer1</a>
<p><a href=&quot;javascript:mkv(2)&quot;>Show Layer2</a><br>
<a href=&quot;javascript:mkh(2)&quot;>Hide Layer2</a>
</body></html>

2b||!2b
 
Upvote 0 Downvote
I like that! thanks lrnmore! Besides, a function would be much better than coping the code over and over!
 
Upvote 0 Downvote
Welcome You Are...

Here's another method using the display , block or none,
this allows the elements to behave alot differently in
relation to each other. Try it out...
Code: 
<!DOCTYPE HTML PUBLIC &quot;-//W3C//DTD HTML 4.0 Transitional//EN&quot;>
<html><head><title>TEST</title>
<script>
function shwhd(el) {
if(document.getElementById(el).style.display == 'block'){
    document.getElementById(el).style.display = 'none'; }
   else { document.getElementById(el).style.display = 'block'; }
}
</script></head><body>
<select id=&quot;selel&quot; onChange=&quot;shwhd(this.value);&quot;>
<option value=&quot;first&quot;>First</option>
<option value=&quot;sec&quot;>Second</option>
</select>
<p>
<table id=&quot;first&quot; style=&quot;display:block;&quot;><tbody><tr>
<td>first cell</td><td>FRIST TABLE</td></tr>
<td>first cell</td><td>sec cell</td></tr>
<td>first cell</td><td>sec cell</td></tr></table>
<p>
<table id=&quot;sec&quot; style=&quot;display:block;&quot;><tbody><tr>
<td>first cell</td><td>SECOND TABLE</td></tr>
<td>first cell</td><td>sec cell</td></tr>
<td>first cell</td><td>sec cell</td></tr></table>
</body></html>

2b||!2b
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
336
feherke
feherke
JRB-Bldr
  • Locked
  • Question
innerHTML onclick() functionality
Replies
2
Views
315
JRB-Bldr
JRB-Bldr
LyndonOHRC
  • Locked
  • Question
Single quote is breaking my onclick action 1
Replies
4
Views
411
LyndonOHRC
LyndonOHRC
ToddWW
  • Locked
  • Question
onClick Not Working 1
Replies
2
Views
205
ToddWW
ToddWW
southbeach
  • Locked
  • Question
MS Edge - onclick=&quot;...&quot; not triggered 1
Replies
2
Views
399
southbeach
southbeach

Part and Inventory Search

Sponsor

Back
Top