In order to accomodate for a large FAQ content I've created a combination of 3 tabs with external loading (ajax) of the content in combination with a sidebar navigation system using affix and scrollspy for "breadcrumbs" and quick navigation, all within a Bootstrap 3/JQuery framework.
I've got working demos of both on their own (a few minor refinements and adjustments are needed) and a demo combining both.
The demo seems to work reasonably well (for some reason my Bootply demo doesn't work quite as well as my stand-alone local files, not sure why) as the external documents are loaded into a DIV via the tabs, and the navigation also works more or less like it should, but what needs to be done if I want the navigation sidebar to reflect the selected tab content? In other words, if I select say tab 2, how do I get a specific nav setup to appear reflecting the content of tab 2, and likewise how to make this change to accomodate for another tab? I assume both the tab content AND nav setup have to simultaneously be loaded into each their own DIV with the help of Ajax.
Here's the code, starting with HTML for both the tabs and the nav sidebar:
Next, the JS for both the tabs and navbar:
Finally, here's one of the external documents which is loaded into the tabs (there are 3 of them, one for each tab, styled slightly differenly in order to distinguish them from each other).