jquery toggle/show hide
<p>I have following markup which is generated dynamically using C# in my asp.net MVC2 application. There could be more rows depending on data in database. I have shown two rows. one is view row other is edit row. by default I want 'view' row(s) visible and rows with id 'edit' will be invisible. I want to use jQuery so that:</p>

<ol>
<li>on click of toggle link, I want view row invisible and edit row visible</li>
<li>on click of update/cancel images, I want edit row invisible and view rows visible. edit button will cause postback</li>
<li>There can be more than one rows with same id (view or edit), do i need to use class instead of id?</li>
</ol>

<p></p>

<pre><code>&lt;table&gt;
  &lt;tr id="view"&gt;
    &lt;a id="toggle" class="icon-button" href="#"&gt;
  &lt;/tr&gt;
  &lt;tr id="edit" style="display:none"&gt;
    &lt;img id="update" alt="Update" src="/static/images/update.png"&gt;
    &lt;img id="cancel" alt="cancel" src="/static/images/cancel.png"&gt;
  &lt;/tr&gt;
  &lt;tr id="view"&gt;
    &lt;a id="toggle" class="icon-button" href="#"&gt;
  &lt;/tr&gt;
  &lt;tr id="edit" style="display:none"&gt;
    &lt;img id="update" alt="Update" src="/static/images/update.png"&gt;
    &lt;img id="cancel" alt="cancel" src="/static/images/cancel.png"&gt;
  &lt;/tr&gt;
&lt;/table&gt;
</code></pre>

<p>[EDIT]</p>

<p>I used this but it is not working:</p>

<pre><code>&lt;script type="text/javascript"&gt;
$(function () {
    $(".icon-button").click(function () {
        alert('I am here');
         $('.view,.edit').toggle();
        return false;
    });

    $(".icon-button-cancel").click(function(){
     alert('I am there');
   $('.view,.edit').toggle();
        return false;
    }
});
</code></pre>

<p>Please suggest solution using jQuery/JavaScript or any any other ASP.NET alternative</p>
