Reputation: 9027
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>
Upvotes: 2
Views: 1127
Reputation: 7536
Use
if ($("#" + self.text()).is(':visible')) {
to check if an element is visible or not. And act accordingly.
On a similar note, you may use .toggle()
method to show/hide elements with jQuery.
Upvotes: 0
Reputation: 1447
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');
});
Upvotes: 2
Reputation: 21376
Try this,
else if ($("#" + self.text()).css('display', 'block')) {
$("#" + self.text()).hide();
return;
}
Upvotes: 0