SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    show/hide row by clicking on -/+

    Why doesn't this work on Mozilla ???
    Code:
    <html>
    <head>
    <script langauge="javascript">
    <!--
    function show(rowID) {
     if (eval('tr'+rowID+'.className')=="hide") {
          eval('tr'+rowID+'.className="show"')
          eval('img'+rowID+'.src="images/minus.gif"');
     }
     else {
          eval('tr'+rowID+'.className="hide"')
          eval('img'+rowID+'.src="images/plus.gif"');
     }
    }
    //-->
    </script> 
    <style>
    <!--
    .hide        { visibility: hidden; display: none }
    .show        { visibility: visible; display: block }
    //-->
    </style>
    </head>
    <body>
    
    <table border=1 cellspacing=1 cellpadding=5>
     <tr>
          <td><a style="cursor:hand" onclick="show('1')"><img name="img1" border="0" src="images/plus.gif" width="10" height="10">&nbsp;Topic 1</a></td></tr>
     <tr id="tr1" class="hide">
          <td>Information for Topic 1 here</td>
     </tr>
     <tr>
          <td><a style="cursor:hand" onclick="show('2')"><img name="img2" border="0" src="images/plus.gif" width="10" height="10">&nbsp;Topic 2</a></td></tr>
     <tr id="tr2" class="hide">
          <td>Information for Topic 2 here</td>
     </tr>
     <tr>
          <td><a style="cursor:hand" onclick="show('3')"><img name="img3" border="0" src="images/plus.gif" width="10" height="10">&nbsp;Topic 3</a></td></tr>
     <tr id="tr3" class="hide">
          <td>Information for Topic 3 here</td>
     </tr>
    </table>
    </body>
    </html>
    Is it possible to make it work? How?
    I'm starting to hate mozilla

    Thanks in advance for your time.

  2. #2
    SitePoint Member AMC's Avatar
    Join Date
    Jul 2001
    Location
    Sesimbra/Portugal
    Posts
    22
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    With some help I managed to improve the script a litle:

    Code:
    function show(rowID) {
    var tr = document.getElementById('tr'+rowID);
     if (tr.className=="hide") {
          tr.className="show";
          document.images['img'+rowID].src="images/minus.gif";
     }
     else {
          tr.className="hide";
          document.images['img'+rowID].src="images/plus.gif";
     }
    }
    With the new code the row shows and Hides, but the table get's all messed up in mozilla
    And the image doesn't change from plus to minus

    Can some one please help???


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •