Connecting Tech Pros Worldwide Forums | Help | Site Map

toggle question

leegold2
Guest
 
Posts: n/a
#1: Jul 23 '05
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<b r>
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<b r>
ddddddddddddddddddddddddddddddddddddddddd<br>
eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
</div>
</td></tr></table>
<a href=javascript:toggle(aa)><b>see more</b></a>
</html>

Ivo
Guest
 
Posts: n/a
#2: Jul 23 '05

re: toggle question


"leegold2" wrote[color=blue]
> <html>
> <script>[/color]

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

<script type="text/javascript">
[color=blue]
> <table border=2px><tr><td>[/color]

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:

<table border="2">
[color=blue]
> <div id=aa style="display:none"> </a>[/color]

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.
[color=blue]
> <a href=javascript:toggle(aa)><b>see more</b></a>[/color]

Don't use "javascript:" as a pseudo-protocol, instead put the script in an
onclick event handler. See this newsgroup's FAQ:
<URL: http://jibbering.com/faq/#FAQ4_24 >
[color=blue]
> <!-- 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>[/color]

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.
--
Ivo


Randy Webb
Guest
 
Posts: n/a
#3: Jul 23 '05

re: toggle question


leegold2 wrote:[color=blue]
> 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<b r>
> 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<b r>
> ddddddddddddddddddddddddddddddddddddddddd<br>
> eeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeeee<br>
> </div>
> </td></tr></table>
> <a href=javascript:toggle(aa)><b>see more</b></a>
> </html>[/color]


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:

--
Randy
comp.lang.javascript FAQ - http://jibbering.com/faq
Closed Thread


Similar JavaScript / Ajax / DHTML bytes