Control block content display use jQuery

Html code:

   1:  <ul id="ui_control">

   2:      <li>Shows</li>

   3:      <li><a href="#" class="current">2</a></li>

   4:      <li><a href="#">4</a></li>

   5:      <li><a href="#">6</a></li>

   6:      <li>rows</li>

   7:  </ul>

   8:  <ul id="ui_body">

   9:      <li>Data row 1</li>

  10:      <li>Data row 2</li>

  11:      <li>Data row 3</li>

  12:      <li>Data row 4</li>

  13:      <li>Data row 5</li>

  14:      <li>Data row 6</li>   

  15:  </ul>​

jQuery code

   1:  var $links = $('#ui_control li a');

   2:  var topIndex = 0;

   3:  var rows = 2;

   4:   

   5:  displayContent(rows);

   6:          

   7:  $links.click(function() {

   8:      rows = $(this).text();

   9:      displayContent(rows);

  10:          $links.fadeIn("fast").removeClass("current").addClass("none");

  11:          $(this).fadeIn("fast").addClass("current");

  12:          return false;

  13:  })

  14:   

  15:  function displayContent(rows) {

  16:      $('#ui_body li').hide(0)

  17:             .slice(0, rows )

  18:             .show();

  19:      topIndex += rows ;

  20:  }​

Demo:

http://jsfiddle.net/jquerybyexample/GkKcc/1/

 

supported by: jquerybyexample@gmail.com

Categories: jQuery

If You Enjoyed This Post Please Take 5 Seconds To Share It.