hiding multiple divs

hiding multiple divs

Hey I need some help with some javascripting.

  1. {foreach key=num item=account from=$accounts}
  2. <div id="info">
  3. <div class="box round">
  4. <table cellspacing="1" class="data">
  5. <tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">
  6. <td>{$account.regdate}</td>
  7. <td>{$account.product}<br /><a href="http://{$account.domain}" target="_blank">{$account.domain}</a></td>
  8. <td>{$account.nextduedate}</td><td>{$currencysymbol}{$account.amount} {$currency}</td>
  9. <td><a>View Details {$account.id}</a></td>
  10. </tr>
  12. </table>
  13. </div>
  14. </div>


I need the info div to hide when the the table row is clicked

  1. <tr onclick="javascript: $('#info').hide('fast'); $('#{$account.id}details').slideDown('slow');" style="cursor:pointer;">



This is what i'm using to hide it. but because i have multiple divs called info that i need hidden it is not working currently its only hiding the first div called info. Any help would be appreciated.

Thanks.