Please help - Hide a table while show a table

[michael941]

Hi,

I have 2 tables in an html page. I have div them separately and id them
as id1 and id2. I have a link there. What I need is click the link to
hide one table and show the other and verse when click the link again.


I tried many ways in javascript but failed. Could someone please help?

Thanks a lot!

 

[VK]

Hi,

I have 2 tables in an html page. I have div them separately and id them
as id1 and id2. I have a link there. What I need is click the link to
hide one table and show the other and verse when click the link again.


I tried many ways in javascript but failed. Could someone please help?

Show your last try, we'll start from there.

 

[ASM]

(e-mail address removed) a écrit :

Hi,

I have 2 tables in an html page. I have div them separately and id them
as id1 and id2. I have a link there. What I need is click the link to
hide one table and show the other and verse when click the link again.


I tried many ways in javascript but failed. Could someone please help?

<button onclick="
var id1 = document.getElementById('id1').style;
var id2 = document.getElementById('id2').style;
if(typeof(asm)=='undefined') {
// 1st time you press button : hide div 2
// asm is a pointer created at this moment
// to avoid to hide 2nd div at each next pressure
asm = true;
id2.display = 'none';
}
else
{
id1.display = id1.display==''? 'none' : '';
id2.display = id2.display==''? 'none' : '';
};">hide / show </button>

 

[michael941]

Hi, VK

well, actually this javascript should be working in a jsp page finally,
not html.

I am guessing jsp should not be embbed into jsp?

thanks

 

[Evertjan.]

ASM wrote on 10 dec 2006 in comp.lang.javascript:

<button onclick="
var id1 = document.getElementById('id1').style;
var id2 = document.getElementById('id2').style;
if(typeof(asm)=='undefined') {
// 1st time you press button : hide div 2
// asm is a pointer created at this moment
// to avoid to hide 2nd div at each next pressure
asm = true;
id2.display = 'none';
}
else
{
id1.display = id1.display==''? 'none' : '';
id2.display = id2.display==''? 'none' : '';
};">hide / show </button>

A global variable remembering the status is not even neccessary:

<script type='text/javascript'>
function swap(button,a,b) {
var x = document.getElementById(a).style;
var y = document.getElementById(b).style;
var swapper = y.display == 'none';
x.display = swapper ? 'none' : '';
y.display = swapper ? '' : 'none';
button.innerHTML = swapper ?
'hide '+b+' / show '+a :
'hide '+a+' / show '+b;
}
</script>

<button onclick="swap(this,'id1','id2')">
hide div id2</button>
<br><br>
<div id='id1'>This is id1</div>
<div id='id2'>This is id2</div>
<br><br>
<button onclick="swap(this,'id3','id4')">
hide div id4</button>
<br><br>
<div id='id3'>This is id3</div>
<div id='id4'>This is id4</div>

 

[michael941]

Thanks, Evertjan,

Your way works sooooooooooooo wellllll~!

Cheers

 

[ASM]

Evertjan. a écrit :

ASM wrote on 10 dec 2006 in comp.lang.javascript:
Hi,

A global variable remembering the status is not even neccessary:

Not too bad