toggle question

L

leegold2

I wondered if anyone would give me code- I think it would be easy, but
I'm a complete newbie. What I want to do is to show many tables in a
brief truncated format and then for each table offer the user the
ability to toggle so they can see the full content of each table
individually. The code I got from the net below works fine for *one*
table but when I try to add a 2nd table it does not work. How can I
apply this toggle individually to each table?

<html>
<script>
function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
}
else {
e.style.display = "none";
}
}
</script>

<table border=2px><tr><td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
<div id=aa style="display:none"> </a>
cccccccccccccccccccccccccccccccccccccccccccccccc<br>
ddddddddddddddddddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
</div>
</td></tr></table>
<a href=javascript:toggle(aa)><b>see more</b></a>
<!-- If I add this table below, it does not work -->
<table border=2px><tr><td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
<div id=aa style="display:none"> </a>
cccccccccccccccccccccccccccccccccccccccccccccccc<br>
ddddddddddddddddddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
</div>
</td></tr></table>
<a href=javascript:toggle(aa)><b>see more</b></a>
</html>
 
I

Ivo

<html>
<script>

For validation, you need the type attribute. The tag should look like:

<table border=2px><tr><td>

The border attribute of table elements takes a numerical value without "px"
or other units. Also consider putting all your atribute values in quotes. It
will be required in future HTML versions, and helps avoiding confusing today
already. Like so:

<div id=aa style="display:none"> </a>

What 's that closing </a> tag about? You 're not posting invalid HTML, are
you? Please run your code through a validator such as <URL:
http://validator.w3.org/ > before taking it to Usenet to avoid
disappointment. And again, try putting quotes around the id value, just like
you did with the style value.
<a href=javascript:toggle(aa)><b>see more</b></a>

Don't use "javascript:" as a pseudo-protocol, instead put the script in an
onclick event handler. See this newsgroup's FAQ:
<!-- If I add this table below, it does not work -->
<table border=2px><tr><td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
<div id=aa style="display:none"> </a>

What! Another element with "aa" as its id? Remember id's should be unique on
a page. It is what they are all about, it is what they were invented for.

None of the remarks above actually have anything to do with the problem you
describe, except perhaps the double id and the non-quoting of attribute
values. You pass a bald aa to the toggle function, but there is no such
variable. There is an element with "aa" as its id, and that is what you want
to give to the function. Like so:

<a href="#" onclick="toggle(document.getElementById('aa') );return false">

It 's not the most efficient way of coding, but should get you on the way.
 
R

Randy Webb

leegold2 said:
I wondered if anyone would give me code- I think it would be easy, but
I'm a complete newbie. What I want to do is to show many tables in a
brief truncated format and then for each table offer the user the
ability to toggle so they can see the full content of each table
individually. The code I got from the net below works fine for *one*
table but when I try to add a 2nd table it does not work. How can I
apply this toggle individually to each table?

<html>
<script>
function toggle(e) {
if (e.style.display == "none") {
e.style.display = "";
}
else {
e.style.display = "none";
}
}
</script>

<table border=2px><tr><td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
<div id=aa style="display:none"> </a>
cccccccccccccccccccccccccccccccccccccccccccccccc<br>
ddddddddddddddddddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
</div>
</td></tr></table>
<a href=javascript:toggle(aa)><b>see more</b></a>
<!-- If I add this table below, it does not work -->
<table border=2px><tr><td>
aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
<div id=aa style="display:none"> </a>
cccccccccccccccccccccccccccccccccccccccccccccccc<br>
ddddddddddddddddddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
</div>
</td></tr></table>
<a href=javascript:toggle(aa)><b>see more</b></a>
</html>


Give your div tags unique ID's as they are required to be.
Pass the ID of the div tags as a string, not as a variable.
toggle('aa')
toggle('bb')
Read the Group FAQ with regards to href="javascript:
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top