CODEWITHSUNDEEP
jqueryasp.netcss
roostaamir
roostaamir

Reputation: 1968

How to hide(or show) a part of the data bound to a repeater using jQuery

Suppose that we have some products and their details in our database. I want products names to appear on the page without their details. And if the user hovers on one of the products, the detail for that specific product slides down. I am using using a repeater to retrieve and show the products' data from the database.

Here's my code:

    //this is the 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>

    //this is the css
    .productTitle
    {
    background-color:#f00;
    font-size:x-large;
    text-align:center;
    }
    .productDetail
    {
    background-color:#ff6a00;
    font-size:large;
    }

    //this is the JQuery
    $(document).ready(function () {
        $(".productDetail").hide();
        $(".productTiltle").hover(function () {
            $(".productDetail").slideDown('normal');
        }, function () {
            $(".productDetail").slideUp('normal');
        }); 
    });

I need the repeater to style every row of product I retrieve from the database. But the problem is (as expected), when I use jQuery to do something to the .productDetail class, every single element with that class will be affected (in this case, all of the page). But I need some way to use jQuery to do something to a specific product.

e.g if we have products 1 to 100,with productTitles of product1,product2,...,product100;and a user hovers on product23,only product23's details show up

How can I achieve this?

Upvotes: 0

Views: 1488

Answers (5)

Manish Parmar
Manish Parmar

Reputation: 859

Hope this jQuery will help you

<script type="text/javascript">
        // this is the jQuery
        $(document).ready(function () {
            $(".productTiltle").each(function (index) {
                $(this).hover(function () {
                    console.log("slidd");
                    $(".productDetail").eq(index).slideDown('normal');
                }, function () {
                    console.log("slidu");
                    $(".productDetail").eq(index).slideUp('normal');
                });
            });
        });
    </script>

Upvotes: 0

Adrian Salazar
Adrian Salazar

Reputation: 5319

Nothing better than good old CSS for this thing.

Remember, the less JS that you have in your page, the better. Less maintenance needed and the less headache! And... there's no way in this planet that jQuery might perform better for this than well coded CSS.

HTML:

<asp:Repeater ID="myRepeater" runat="server">
    <ItemTemplate>
      <div class="wrapper">
        <div class="productTiltle">
            <%#Eval("producttitle") %> <br />
        </div>
        <div class="productDetail">
            <%#Eval("productdetail") %>
        </div>
       </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;
  display: none;
}

.wrapper:hover .productDetail
{
  display: block;
}

Upvotes: 0

Subliminal Hash
Subliminal Hash

Reputation: 13744

Give your detail divs data attributes such as:

<div class="productTiltle" data-productid="<%# Eval("ProductID") %>">
    <%#Eval("producttitle") %> <br />
</div>

<div class="productDetail" data-productid="<%# Eval("ProductID") %>">
    <%#Eval("productdetail") %>
</div>

then in jquery

$(document).ready(function () {
  $('.productTitle').click(function (e) {
      e.preventDefault();
      var productID = $(this).data('productid');
      $('.productDetail [data-customerID="' + productID + '"]').slideDown();
  });
});

NOTE: I have changed to mis-spelled productTiltle to productTitle

Upvotes: 0

kst
kst

Reputation: 1518

You can set like this.

.productDetail
    {
       display: none;
       background-color:#ff6a00;
       font-size:large;
    }

For Jquery

$('.productTiltle').mouseover(function() {
    $(this).next('.productDetail').slideDown('normal');
  }).mouseout(function(){
    $(this).next('.productDetail').slideUp('normal');
  });

Upvotes: 1

Nithin Paul
Nithin Paul

Reputation: 2199

Did you try jquery hide and show functions?

Upvotes: 0

Related Questions