On click ticket ID open message-content tr

**vinpkl** · 08-21-2016, 12:45 PM

hi all

I am trying to open message-content tr on click ticket ID

but its not opening message-content tr

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#imaptable{border:1px solid #CCCCCC; border-collapse:collapse}
#imaptable td{padding:3px}
#imaptable th{background-color:#eee; padding:3px;}
.message-content{display:none}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="imaptable">
<tr>
<td><a href="" class="ticket">Ticket ID</a></td>
<td class="date">Mon, 7 May 2016</td>
<td class="from">John</td>
<td class="subject">Subject : inquiry df</td> 
</tr>
<tr>
<td class="message-content" colspan="5">first ticket message comes here</td>
</tr>
<tr>
<td><a href="" class="ticket">Ticket ID</a></td>
<td class="date">Mon, 12 May 2016</td>
<td class="from">Sam Cook</td>
<td class="subject">Subject : getting latest phone</td> 
</tr>
<tr>
<td class="message-content" colspan="5">second ticket message comes here</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var msgopen = $('.message-content');
$('.ticket').click(function(e) {
   msgopen.hide();
   $(this).closest("tr").next(".message-content").show();
});
</script>
</body>
</html>

vineet

**jscheuer1** · 08-21-2016, 04:29 PM

The class (message-content) is on the td element, but that's not within the next() category (must be a same level child of the parent of the element being searched from) of the tr you get with closest("tr"). Long story short, move the message-content class to the tr elements. Also the click function on an a tag that has an href (even an empty one) must be at least default prevented, otherwise the page will reload before or immediately after the action is carried out (changes/additions highlighted, 3 places):

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
#imaptable{border:1px solid #CCCCCC; border-collapse:collapse}
#imaptable td{padding:3px}
#imaptable th{background-color:#eee; padding:3px;}
.message-content{display:none}
</style>
</head>
<body>
<table width="100%" border="1" cellspacing="0" cellpadding="0" id="imaptable">
<tr>
<td><a href="" class="ticket">Ticket ID</a></td>
<td class="date">Mon, 7 May 2016</td>
<td class="from">John</td>
<td class="subject">Subject : inquiry df</td> 
</tr>
<tr class="message-content">
<td colspan="5">first ticket message comes here</td>
</tr>
<tr>
<td><a href="" class="ticket">Ticket ID</a></td>
<td class="date">Mon, 12 May 2016</td>
<td class="from">Sam Cook</td>
<td class="subject">Subject : getting latest phone</td> 
</tr>
<tr class="message-content">
<td colspan="5">second ticket message comes here</td>
</tr>
</table>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
var msgopen = $('.message-content');
$('.ticket').click(function(e) {
   msgopen.hide();
   $(this).closest("tr").next(".message-content").show();
   e.preventDefault();
});
</script>
</body>
</html>