Incrementally hide items from a set of matched li elements with each button click using hide(), then show() entire set at end of set

Incrementally hide items from a set of matched li elements with each button click using hide(), then show() entire set at end of set

Hi, I am new to jQuery and I am having trouble with the syntax, selectors and refining when trying to create functions. I was hoping someone might be able to help.

What I am trying to achieve:

I have a gallery consisting of a ul with images placed in vertically stacked list items. The ul is in a fixed size wrapper with overflow:hidden so only the first list item displays. The user clicks a button and the first li is hidden using hide(400). This makes the other list items flow up and reveals the second list item within the wrapper window.

When the last list item is visible, the click will show(400) all of the list items again, causing them to flow back into order and only the first item will be showing again.

Further clicks will repeat this process from the beginning.

I know what I would like to do in terms of code, but I am having trouble with the correct syntax, selectors and refining.

I have included the html and description version of the code I was hoping to create. I know the code could be much more efficient by placing functions into varibles and testing for true false, but I would like to see the steps with my longer code description for learning purposes. Perhaps afterwards someone can blast it off in two lines.

Regardless, thanks to anyone who can help with this. I love the possibilities of jQuery and look forward to learning more.

Thanks in advance!
ThomUI

Please forgive the messy CSS jammed in the top! I added it in case you wanted to copy paste it to see in a browser.

  1.        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2.     <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.     <title>list hiding test</title>
  6.     <style>
  7.     .listWrapper {
  8.     height:25px;
  9.     width:380px;
  10.     background-color:#d6d6d6;
  11.     float:left;
  12.     font-size:18px; 
  13.     margin:0; 
  14.     list-style:none;
  15.     overflow:hidden;
  16.     }
  17.     span { color:blue; text-decoration:underline; cursor:pointer; }
  18.     .example { font-style:italic; }
  19.     a.nextItemBtn {
  20.     background-color:#888888;
  21.     cursor:pointer;
  22.     width:120px;
  23.     height:120px;
  24.     float:left;
  25.     }
  26.     </style>
  27.     <script src="http://code.jquery.com/jquery-latest.min.js"></script>
  28.     </head>
  29.     
  30.     <body>
  31.        
  32.       <ul class="listWrapper">
  33.         <li ><a href=""><img src="" />pic 1</a></li>
  34.         <li ><a href=""><img src="" />pic 2</a></li>
  35.         <li ><a href=""><img src="" />pic 3</a></li>
  36.         <li ><a href=""><img src="" />pic 4</a></li>
  37.       </ul>
  38.      <a class="nextItemBtn"><img src="" />see more</a>
  39.     
  40.     <script>
  41.     
  42.     var listLength = 4; //number of li items in the ul, this will be dynamic, here we test with 4
  43.     var listCounter = 0; //show(400) all list items once we reach the end (listLength -1)
  44.     var listPosition = [0]; //the first spot in the returned set of matched elements, incremented at each click()
  45.     
  46.     $(".nextItemBtn").click(function () { //click nextItemBtn
  47.      
  48.     if (listCounter == listLength -1) { //if we reach the end of the list, make the entire list visible again using show(400)
  49.      $(".listWrapper li").show(400); //show all list items
  50.      listCounter = 0;//reset the listCounter, this will allow the user to see the first list item again while the rest remain overflow:hidden
  51.      listPosition = [0]; //reset list position
  52.     }
  53.     else {
  54.      $(.listWrapper li[listPosition]).hide(400); //get the first li in listWrapper and hide(400)
  55.      listCounter ++; //add one to the number of li items we have hidden
  56.      listPosition ++; //add one to the index position so next click() the second li in listWrapper will hide(400), next time the third etc 
  57.      //I'm pretty sure you can't stick a variable in for an index number... doh!
  58.     }
  59.     });
  60.     
  61.     </script>

  62.     </body>
  63.     </html>