toggle question

Discussion in 'Javascript' started by leegold2, Nov 6, 2004.

  1. leegold2

    leegold2 Guest

    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>
     
    leegold2, Nov 6, 2004
    #1
    1. Advertisements

  2. leegold2

    Ivo Guest

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

    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:

    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.
    Don't use "javascript:" as a pseudo-protocol, instead put the script in an
    onclick event handler. See this newsgroup's FAQ:
    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, Nov 6, 2004
    #2
    1. Advertisements

  3. leegold2

    Randy Webb Guest


    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 Webb, Nov 6, 2004
    #3
    1. Advertisements

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 (here). After that, you can post your question and our members will help you out.