hide/show specific number of items from asp.net repeater using jquery or javascript

Question

I have ASP.NET Repeater and I am binding Hotel Rooms to it, I need to show Maximum 3 rooms and rest records should show when user click on "More Rooms" button/anchor.

I have solved this problem with two ASP.NET Repeaters where I bind 1st Repeater with 3 rooms and 2nd Repeater with other rooms wrap with a div(Show/Hide with ID using jQuery). BUT I THINK THIS IS NOT A GOOD APPROACH. I NEED TO DO IT WITH ONE ASP.NET REPEATER.
I also need to show and hide hidden rooms with jquery slideToggle() API

Here is my code using two Repeaters:

<asp:Repeater ID="RPRoomsWithThreeRecords" runat="server">
    <ItemTemplate>
        <div class="search_hotel_book_now">
            <div class="search_hotel_book_left">
                <p>Executive Room with bed and breakfast</p>
            </div>
            <div class="search_hotel_book_right">
                <a href="#">Book Now</a> <span>2 500,-</span>
                <p>NOK</p>
            </div>
        </div>
    </ItemTemplate>
</asp:Repeater>

<div id="hideShowDiv">   
    <asp:Repeater ID="RPRoomsOtherRecords" runat="server">
        <ItemTemplate>
            <div class="search_hotel_book_now">
                <div class="search_hotel_book_left">
                    <p> Executive Room with bed and breakfast</p>
                </div>
                <div class="search_hotel_book_right">
                    <a href="#">Book Now</a> <span>2 500,-</span>
                    <p> NOK</p>
                </div>
            </div>
        </ItemTemplate>
    </asp:Repeater>
</div>

I have also attached screen shot for reference. Thanks in advance.

Answer 1

Finally :) I have done it. :) Thanks @Ahmed and @Hiren Desai for a wonderfull help :) Your examples give me a way to solve it with slideToggle() jQuery API

Basically I wrap hidden records into a DIV using jquery wrapALL() API, and after that I was able to slideUp and slideDown hidden records using jQuery API slideToggle();

ASP.NET CODE

<asp:Repeater runat="server" ID="RPHotels" OnItemDataBound="RPHotels_ItemDataBound">
<ItemTemplate>
    <div class="search_hotel_div">
        <div class="search_hotel_right">

            <asp:Repeater runat="server" ID="RPRooms" OnItemDataBound="RPRooms_ItemDataBound">
                <ItemTemplate>
                    <div class="search_hotel_book_now">
                        <div class="search_hotel_book_left">
                            <p>
                                <asp:Literal ID="lblRoomType" runat="server" Text="Double Ensuite Double Bed Tv Telephone"></asp:Literal>
                            </p>
                            </div>
                            <div class="search_hotel_book_right">
                                <a href="#">Book Now</a> <span>
                                    <asp:Literal ID="lblRoomPrice" runat="server" Text="800,-"></asp:Literal></span>
                            </div>
                          </div>
                </ItemTemplate>
            </asp:Repeater>

            <div class="more_rooms srchbox">
                <a href="#" class="moreRooms">more rooms</a></div>
        </div>
    </div>
    <hr style="border: none; border-top: #d9d9d9 solid 1px; margin-top: 10px;" />
</ItemTemplate>

JQUERY CODE

//Loop will work on each Hotel 
        $(".search_hotel_div").each(function (e) {
                //Loop will work on each Hotel's Room
                //Select rooms from bottom to 4th room using jQquery slice()
                //and wrap selected items with a div with class name .divSlideUpDown: 
                $(".search_hotel_book_now", this).slice(3).wrapAll("<div class='divSlideUpDown' style='display:none;' />");

                $(this).find('.moreRooms').click(function () {

                    //my Toggle work here :)
                    $(this).parents().siblings(".divSlideUpDown").slideToggle(); 
                    $(this).text($(this).text() == "more rooms" ? "hide rooms" : "more rooms") 
                    return false;
                });
        });

Answer 2

Rather than using two reater what you can do is Double looping on Repeater.. 1) External loop will work on each Hotel 2) Internal loop will work on each room

for ex

$('#Selector for each hotel').each(function(e,res){
    $(res).children('selector for each rooms').each(function(e1,res1){
        if(parseInt(e1)>=3)
        {
            $(this).hide(); or .css('display','none');
        }
    });
    $(this).children('selector for more button').click(function(){
        $(this).parents('selector to the top parent of each rooms').children('selector for each rooms').show();
    });
});

I guess you are good at jQuery since I was not able to get Selector from your code Let me know if you doesn't get it

Answer 3

You can use Jquery :lt() selector:

$('.search_hotel_book_now:lt(3)').each(function(){
    $(this).show();
});

Make the items hidden by default, and show the first three items using :lt()

For the rest to be displayed, set a click listener:

$('#more-items').click(function() {
    $('.search_hotel_book_now').show();
});

http://api.jquery.com/lt-selector/

Answer 4

You can do it this way

<style type="text/css">
  .search_hotel_book_now
  {
    border: 1px solid black;
    display: block;
  }
  .hide
  {
    display: none;
  }
</style>

<asp:Repeater runat="server" ID="rptr">
  <ItemTemplate>
    <div class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'>
        <div class="search_hotel_book_left">
          <p>
            Executive Room with bed and breakfast</p>
         </div>
         <div class="search_hotel_book_right">
            <a href="#">Book Now</a> <span>2 500,-</span>
            <p>NOK</p>
         </div>
            <%# Eval("Your_Field")%>
         </div>
  </ItemTemplate>
  <FooterTemplate>
      <div id="viewMore">  
            View More</div>
  </FooterTemplate>
</asp:Repeater>

<script type="text/javascript">
    $("#viewMore").click(function () {
        $(".hide").removeClass("hide").addClass("search_hotel_book_now");
        $("#viewMore").hide();
    });
</script>

---

Main thing here is

class='<%# (Container.ItemIndex < 3 ? "search_hotel_book_now" : "hide") %>'

What I have done is a check during data binding id Item being bind is > the index 3 then apply hide class to it which will hide it initially.