title: I am using addClass/removeClass and "data-" attribute to show/hide divs. How can I add next/previous?
body: <p>I am trying to work out the template for an ebook. This is what I have at present: <a href="http://jsbin.com/otakab/2/edit" rel="nofollow">http://jsbin.com/otakab/2/edit</a>  But the next/previous doesn't work.  Can you supply working code?</p>
  
  <pre><code>// Following function works
  $(function() {
      $(".pageNumbers a").on("click", function(e) {
      //  Add highlight to the element clicked and remove highlighting from its siblings
      $(this).addClass("highlight").siblings().removeClass("highlight");
      //  Make use of our data attribute to show the correct page and hide the siblings
      $($(this).data('page')).show().siblings(".page").hide();                
  });
  
  //  Finally, dynamically click first page to start things off for the user 
  //and provide proper highlighting and showing of text
    $("#a-1").click();
  
  });
  
  // Following function DOES NOT WORK
  $(function() {
  $(".direction a").on("click", function(e) {
  // Trying to show the next/previous hidden div
  $($(this).data('page')).show().siblings(".page").hide();
  
  });
  
  });
  </code></pre>