I need to present large amounts of text/image content on one of my pages (I will be using Bootstrap for my site) and believe I’ve found a nice method for this:
-
an “Affix” sidebar with “scrollspy” on the right side for navigating (as used on the right hand side of the Bootstrap docs pages)
-
a 3-section tab, for accessing the 3 individual parts of my text/image content (an example at this product page -click on the “Overview”, “Details”, “Specifications” and “Support” tabs. Unlike this example though my tabs should allow for a responsive content.
The sidebar would function as an overview index of the content, allow me to quickly jump from one section to another and also show exactly where I am in the document. The tabs will allow me to quickly switch between the 3 sections. I believe this would make for an enjoyable and efficient way to read or browse through all/any of the content.
At this stage I don’t know if the sidebar should show ALL 3 sections, then jump to the appropriate tab when a specific anchor is selected, or if the sidebar should show ONLY the contents of the current open tab.
In any case AJAX would come in handy to show any of the tabs’ content without reloading the whole page. That would include the sidebar as well.
I have absolutely no experience with AJAX, so what would I have to do to use it as explained above? Do I have to install something on the server side, or is it just a matter of HTML, CSS and JS code?