Question

I have this code, which adds a extra table row when clicked and hides it when the exact row is clicked again. I have to make the opened row to disappear when another row is clicked. There should be opened only one extra row at the time.

Code:

    $(document).ready(function(){
        $("#datu_tab tr:odd").addClass("odd");
        $("#datu_tab tr:not(.odd)").hide();
        $("#datu_tab tr:first-child").show();

        $("#datu_tab tr.odd").click(function(){
            $(this).next("tr").toggle();
            $(this).find(".arrow").toggleClass("up");
        });

     });

[EDITED]

Demo – something like this – http://jsfiddle.net/658vH/

[edited2]

real code looks like this:

    $res=mssql_query($query);

    echo "

    <table border='1' id='datu_tab' class='saraksts_table' width='100%' cellspacing='0'>

     <tr class='saraksts_header'>
    <th><center><font size='1.2px'>xx</font></center></th>
   <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
    <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
      <th><center><font size='1.2px'>xx</font></center></th>
       <th><center><font size='1.2px'>xx</font></center></th>
     <th><center><font size='1.2px'>xx</font></center></th>
    </tr>

   ";

    while($row = mssql_fetch_array($res))
   {

      echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
     echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "<td>" . $row['xx'] . "</td>";
      echo "</tr>"; 
      echo "<tr>"; 
      echo" <td colspan='9' style='background-color:#EEEEEE;'>
         <div id=v".$row["atz_id"]." ></div>      
   </td>";
          echo "</tr>";
   }
     echo "</table>";

HTML code:

      <tr  OnClick= ' javascript:AjaxVesture(73)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxx4</td><td>000111</td><td>Sxxxs</td><td>Pxxxxds</td><td>C</td><td></td><td></td><td></td><td> </td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'><div id=v73 ></div> </td></tr>

     <tr  OnClick= ' javascript:AjaxVesture(9)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>Lxxx56</td><td>0xxx8</td><td>Sxxxs A</td><td>xxxx</td><td>Ax

     <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v9 ></div> </td></tr>

      <tr  OnClick= ' javascript:AjaxVesture(66)','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' ><td>xx</td><td>00xx</td><td>xx</td><td>xxxx</td><td>Axxx</td><td></td><td>01.01.2005</td><td></td><td>LC</td></tr>

      <tr> <td colspan='9' style='background-color:#EEEEEE;'> <div id=v66 ></div>  </td></tr>    

Answer 1

Try following:

$(document).ready(function(){
    /* $("#datu_tab tr:odd").addClass("odd"); do you need this for css? */
    $("#datu_tab tr:not(:odd):not(:first-child)").hide();

    $("#datu_tab tr:odd").click(function(){
        var oNext = $(this).next("tr");
        $("#datu_tab tr:not(:odd):not(:first-child)").not(oNext).hide();
        oNext.toggle();
        $(this).find(".arrow").toggleClass("up");
    });
});

Also see this example.

=== UPDATE ===

Please replace following lines of your code:

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].")','tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

to

echo "<tr  OnClick= 'javascript:AjaxVesture(".$row["atz_id"].");tableRow.style.backgroundColor = red'  onmouseover='ChangeColor(this, true)' onmouseout='ChangeColor(this, false)' >";

and

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=v".$row["atz_id"]." ></div>      
</td>";

to

echo" <td colspan='9' style='background-color:#EEEEEE;'>
    <div id=\"v'.$row["atz_id"].'\" ></div>      
</td>";