Jquery slide down and up with arrows

Question

I am trying to figure out a simple way to use jquery to have a list of 5 items and then hit an arrow down and it shows 5 more items and so on and so on. If the up and down arrows fadeaway when it reached the top and bottom that would be a plus. Any help would be greatly appreciated.

Answer 1

hi,

Refer link below it will help you.

http://www.queness.com/post/3036/create-a-custom-jquery-image-gallery-with-jcarousel

Answer 2

Try something like this. Not too fancy but it does its job.

        var topIndex   = 0;
        var step       = 5;
        var itemsCount = $('li').size();
        showItemsStartingFrom(topIndex);

        $('a.next').click(function()
        {
            showItemsStartingFrom(topIndex);
            return false;
        })

        function showItemsStartingFrom(index)
        {
            $('li').hide(0)
                   .slice(index, index+step)
                   .show();
            topIndex += step;
            if (topIndex >= itemsCount)
                $('a.next').fadeOut(300);
        }

Answer 3

There are lots of pagination plugin for jquery. It will save your time by adjusting some code for your project.

http://blog.ajaxmasters.com/jquery-pagination-plugin/

http://tympanus.net/codrops/2009/11/17/jpaginate-a-fancy-jquery-pagination-plugin/

http://web.enavu.com/tutorials/making-a-jquery-pagination-system/

or if you wanna do by yourself, it would be something like this

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>

<script type="text/javascript">
  $(document).ready(function() {
    $('#items li').hide().slice(0, 4).show();

    $(".arrow").click(function(){
      var arrow = $(this).attr("id");
      if(arrow == 'down') {
         $('#items li:visible').last().nextAll().slice(0, 4).show("slow");
         //or $('#items li:hidden').slice(0, 4).show("slow");
      } 
      else if(arrow == 'up') {
         $('#items li:visible').slice(-1, -4).hide("slow");
      }
      if ($('#items li:visible').length > 0)  $('#up').fadeOut();
      else  $('#up').show();
      if ($('#items li:hidden').length > 0)  $('#down').show();
      else $('#down').fadeOut();
    });
  });
</script>

ps: I couldn't test it

Answer 4

this should work, tested

<script type="text/javascript">
    $(document).ready(function() {
        //hide all list items, and show the first 5 items
        $('#items li').hide().slice(0, 5).show();
        //hide the up button
        $('#up').hide();

        var length = $('#items li').length;
        var current_page = 0;
        var per_page = 5;

        $(".arrow").click(function(){
         var arrow = $(this).attr("id"); 
         if(arrow == 'down') {
          current_page = current_page + 1; //increment the page
          if (length >= current_page*per_page) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the next page
          }
         } 
         else if(arrow == 'up') {
          current_page = current_page - 1; //decrement the page  
          if (current_page >= 0) { //check if it's possible page
           $('#items li').hide().slice((current_page*per_page), (current_page*per_page+per_page)).fadeIn(); //show the prev page
          }
         }
         //check if the down button will be still shown or hidden
          if (length >= (current_page+1)*per_page) $('#down').show();
          else $('#down').hide();
         //check if the up button will be still shown or hidden
          if ((current_page-1) >= 0) $('#up').show();
          else $('#up').hide();
        });
    });
    </script>

<img src="./up.jpg" id="up" class="arrow">
<img src="./down.jpg" id="down" class="arrow">
<ul id="items">
  <li>1</li>
  ....
  <li>30</li>
</ul>