I am using addClass/removeClass and "data-" attribute to show/hide divs. How can I add next/previous?
<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>
