I'm building a multi-directional jQuery Scrollable-powered page. I have the gist of it implemented. There are navigation elements to the left, like a sub-navigation menu in place of left and right arrows. And there are up and down arrows to navigate within the contents of each of the sub-navigation menu categories, all on the same page.

Here is an example (I'm using WordPress): http://www.beaconnected.com/cleansenew/?page_id=5

About the Founder does what I'm speaking about, a vertical scrolling pane accessed by a left and right navigation.

Here is the working page: http://www.beaconnected.com/cleansenew/?page_id=543

What I want to do on the page above is allow for optional left and right navigation on top of optional vertical scrolling, no matter what sub-navigation menu category is live. If you see now, I click "nutrition" and then I can click the up and down arrows at the side to navigate through the different panels. When I click "quick tips," however, or any of the other sub-navigation menu categories that have multiple panels nested beneath one another, I cannot scroll vertically any longer.

This is the code:

jQuery(document).ready(function() {
$("#vertScrollable").scrollable({vertical:true,prev:".healthup",next:".healthdown"});
$("#scrollable").scrollable();
var myApi = $("#scrollable").data("scrollable");
$(".nutrition").bind('click', function() {
myApi.seekTo(0);
});
$(".fitnessExercise").bind('click', function() {
myApi.seekTo(1);
});
$(".beautySkincare").bind('click', function() {
myApi.seekTo(2);
});
$(".mindfulness").bind('click', function() {
myApi.seekTo(3);
});
$(".quicktips").bind('click', function() {
myApi.seekTo(4);
});
$(".recipes").bind('click', function() {
myApi.seekTo(5);
});
$(".glossary").bind('click', function() {
myApi.seekTo(6);
});
});

I'm stumped at this point. Anyone have any ideas? Tips? Insight?