title: Use bootstrap pagination and jquery to swap divs in a page
body: <p>I am trying to use Bootstrap pagination on my webpage. Based on everything avaliable online I have come up with the following piece of code thats taken from what's available online. What I need is to be able to swap divs on the same page. The problem in this script occurs early wherein my currentpage variable is undefined and am also not able to find the activePage. I have used <code>$(".pagination-container").data('page')</code> and also <code>$(this).data('page')</code> and both return undefined. I'll be greatful if someone can have a look at the script and give necessary pointers as to how to make it work.</p>
  
  <pre><code>&lt;script&gt;
  var paginationHandler = function(){
    $('.page_control li').unbind('click', paginationHandler);
    var currentPage   = $(this).data('page');
        var   activePage   = $(this).parent().find('.active').data('page');
          var num_elements   = $(this).parent().children().length;
  // This equals the first data-page value after the &lt; button.
          var start    = 1;
   // This is the end of the actual pages, remember it is offset by the &lt; and &gt; buttons.
          var end     = num_elements-2;
    if(currentPage === '+' ){
        (activePage &lt; end) ? currentPage = activePage + 1 : currentPage = start;
    }
  
    if(currentPage === '-'){
        (activePage &gt; start) ? currentPage = activePage - 1 : currentPage = end;
    }
  // Remove the active class to the li
    $(this).parent().find('.active').removeClass('active');
  
  // Add the active class to the appropriate li taking
            $(this).parent().find('li[data-page*=' + currentPage + ']').addClass('active');
  
  $(this).parents("div .pagination-container").find('div[data-page*=' + activePage + ']').fadeOut('fast', function(){
         $(this).parents("div .pagination-container").find('div[data-page*=' + currentPage + ']').fadeIn('fast');
    $('.page_control li').bind('click', paginationHandler);
    });
  };
  $( document ).ready( paginationHandler );
  &lt;/script&gt;
  </code></pre>
  
  <p>And here's my HTML:</p>
  
  <pre><code>&lt;div class="pagination-container" &gt;
  &lt;div data-page="1" &gt;
        &lt;p&gt;Content for Div Number 1&lt;/p&gt;
     &lt;/div&gt;
     &lt;div data-page="2" style="display:none;"&gt;
        &lt;p&gt;Content for Div Number 2&lt;/p&gt;
     &lt;/div&gt;
     &lt;div data-page="3" style="display:none;"&gt;
        &lt;p&gt;Content for Div Number 3&lt;/p&gt;
     &lt;/div&gt;
     &lt;div data-page="4" style="display:none;"&gt;
        &lt;p&gt;Content for Div Number 4&lt;/p&gt;
     &lt;/div&gt;
     &lt;div data-page="5" style="display:none;"&gt;
        &lt;p&gt;Content for Div Number 5&lt;/p&gt;
     &lt;/div&gt;
  
     &lt;div class="pagination pagination-centered pagination-large" style="position:absolute; bottom:0;"&gt;
         &lt;ul class="page_control "&gt;
              &lt;li data-page="-" &gt;&lt;a href="#" &gt;&amp;lt;&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active" data-page="1"&gt;
                  &lt;a href="#" &gt;1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li data-page="2"&gt;&lt;a href="#" &gt;2&lt;/a&gt;&lt;/li&gt;
              &lt;li data-page="3"&gt;&lt;a href="#" &gt;3&lt;/a&gt;&lt;/li&gt;
              &lt;li data-page="4"&gt;&lt;a href="#" &gt;4&lt;/a&gt;&lt;/li&gt;
              &lt;li data-page="5"&gt;&lt;a href="#" &gt;5&lt;/a&gt;&lt;/li&gt;
              &lt;li data-page="+"&gt;&lt;a href="#" &gt;&amp;gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
     &lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>