To simplify the process, consider incorporating product IDs as well. Include the specific product ID as a data attribute and then leverage jQuery to extract and reuse it for targeting rows containing descriptions.
$('.productname').on('click', function() {
var id= $(this).attr('data-id');
$(this).toggleClass('active');
$('.data' + id).slideToggle(500);
});
.hide {display: none; }
/* -- below is just to "pretty up" the snippet ------ */
table {
width: 100%;
background: #eee;
border-collapse: collapse;
border: 1px solid #aaa;}
th { background: #cef; color: #4cf; text-transform: uppercase; font-size: 0.8em; padding: 3px;border: 1px solid #aaa;}
td { font-size: 1.1em; padding: 5px 10px; border: 1px solid #aaa; border-bottom: none; }
tr.collapsed td { padding: 0; border: none; }
.productname:hover, .active { background: #eff; }
.productdesc { padding: 5px 10px; background: #eff; border-top: 1px solid #aaa; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="products">
<thead>
<tr>
<th>Product Name</th>
<th>Type</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<!--
foreach (product p in model.products)
{
-->
<tr class="productname" data-id="prodID00">
<!-- Change data-id="prodID00" to data-id="@p.productID" -->
<td>
@p.name
</td>
<td>
@p.type
</td>
<td>
@p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID00">
<!-- Change class="hide productdesc dataprodID00" to class="hide productdesc <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9b9e8b9ebf8fd18f8d909b8a9c8bb6">[email protected]</a>D" -->
<p>@p.productDescription <a href="#">@p.productLink</a></p></div>
</td>
</tr>
<!-- } -->
<!-- below are just manual iterations of the row above -->
<tr class="productname" data-id="prodID01">
<td>
@p.name
</td>
<td>
@p.type
</td>
<td>
@p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID01">
<p>product description and <a href="#">link</a></p></div>
</td>
</tr>
<tr class="productname" data-id="prodID02">
<td>
@p.name
</td>
<td>
@p.type
</td>
<td>
@p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID02">
<p>product description and <a href="#">link</a></p></div>
</td>
</tr>
<tr class="productname" data-id="prodID03">
<td>
@p.name
</td>
<td>
@p.type
</td>
<td>
@p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID03">
<p>product description and <a href="#">link</a></p></div>
</td>
</tr>
<tr class="productname" data-id="prodID04">
<td>
@p.name
</td>
<td>
@p.type
</td>
<td>
@p.price
</td>
</tr>
<tr class="collapsed">
<td colspan="3">
<div class="hide productdesc dataprodID04">
<p>product description and <a href="#">link</a></p></div>
</td>
</tr>
</tbody>
</table>
Note where the prodID is located in the rows.....
I removed the foreach function and brackets because it's invalid HTML. However, if they dynamically generate the HTML, it should work smoothly. The rows used are simply manual iterations rather than dynamic ones.