In our database, we store details of various products. I want to display only the names of the products on a page without their associated details. When a user hovers over a specific product name, I would like the details for that particular product to slide down. The data is being retrieved and displayed using a repeater.
Below is the code snippet:
//html
<div>
<asp:Repeater ID="myRepeater" runat="server">
<ItemTemplate>
<div class="productTiltle">
<%#Eval("producttitle") %> <br />
</div>
<div class="productDetail">
<%#Eval("productdetail") %>
</div>
</ItemTemplate>
<SeparatorTemplate>
<hr />
</SeparatorTemplate>
</asp:Repeater>
//css
.productTitle
{
background-color:#f00;
font-size:x-large;
text-align:center;
}
.productDetail
{
background-color:#ff6a00;
font-size:large;
}
//jQuery
$(document).ready(function () {
$(".productDetail").hide();
$(".productTiltle").hover(function () {
$(".productDetail").slideDown('normal');
}, function () {
$(".productDetail").slideUp('normal');
});
});
I want each product row retrieved from the database to be styled by the repeater. However, when I try to use jQuery to interact with the .productDetail class, it affects all elements with that class on the page. Is there a way to target a specific product using jQuery?
For example, if we have products numbered 1 through 100, with productTitles ranging from product1 to product100, and a user hovers over product23, only the details for product23 should be displayed.
How can this be achieved?