Question

I have a simple function that shows and hides elements if a user clicks a link.

It’s currently set up as such:

$('div.box table a').click(function (e) {

    stopEvent(e);
    var self = $(this);

    if ($("#" + self.text()).css('display', 'none')) {
        $("#" + self.text()).show('slow');

        return;
    }
    else if ($("#" + self.text()).css('display', 'table-row')) {
        $("#" + self.text()).hide();

        return;
    }

});

So basically, if the user clicks a link, i get the tablerow that has the ID which is the text of the link. I also check the “display”-tag of the tr to determine whether i should show or hide.

Sadly, it’s buggy as all hell and hiding doesn’t work.

Thankful for any help!

Edit: Html part, as requested:

        <%  bool even = true;
            foreach (var item in ViewBag.NefList)
          {%>
                <tr <%: even? "class=even" : "" %>>
                    <td><%: Html.ActionLink(item.Artno, "action", new { artno = item.Artno, week = ViewBag.Week, projectID = item.projectID  })%></td>
                    <td><%: item.projectName%></td>
                    <td><%: item.qty%></td>
                    <td><%: item.totalStock%></td>
                    <td><%: item.Description%></td>
                </tr>
                <tr <%: even? "class=even" : "" %> style="display: none" id ="<%: item.Artno %>"> <td>Hello</td></tr>
         <% even = !even;
          } %>   
</table>

Answer 1

You have an error in your check to determine if the element is visible. The toggle method will take care of this for you.

$('div.box table a').click(function (e) {
    var self = $(this);
    e.preventDefault

    $("#" self.text()).toggle('slow');
});