jQuery/Javascript - Creating a documentation system

Question

Are there any js/jquery scripts out there like this one:

http://jqapi.com

A left menu that changes the content on the right, with the ability to search it.

Answer 1

jsdoc is perl script that creates a similar documentation style.

http://jsdoc.sourceforge.net/

Answer 2

Someone posted almost this exact question a few minutse ago and then deleted the post before I could submit my answer. Was that you? Either way, I'll skip the bitching and just answer your question.

Here goes.

Assuming that you want to just update the visible contents or your page without loading a different one (either fully or through AJAX), you could accomplish this with a simple "tab" script -- just think of your left sidebar menu as a folder's tabs, with the contents of the folder being on the right.

We'll call your left sidebar's menu the "tab console" and your right-side main container the "tab pane."

Let's say your tab console's html looks something like this:

<ul id="tab_console">
    <li id="first"><a href="#">My First Page</a></li>
    <li id="second"><a href="#">My Second Page</a></li>
    <li id="third"><a href="#">My Third Page</a></li>
</ul>

... and your tab pane's lookw like this:

<div id="tab_pane">
    <div id="page_first"></div>
    <div id="page_second"></div>
    <div id="page_this"></div>
</div>

You would need to hide the various tab pane contents, so they don't all show at once. You can do this with CSS:

#tab_pane div {display: none;}

Now we need a script to make it all work:

$(document).ready(function(){                    // fires when browser loads your html
    $('#tab_console > li').click(function() {    // fires when a tab is clicked
        $('#tab_pane > div').hide();             // hides all tab contents
        $('#tab_pane > #page_' + $(this).attr('id')).show();   // show the selected tab
    });

    $('#tab_pane > li#page_first').show();     // load your default tab
});

That's the basic idea, anyway. I would suggest reading an introductory tutorial to jquery if you are confused about any of this.

EDIT - I should add that the example posted this time uses ajax requests. You can read the jquery documentation and change the code where applicable. It's just as simple, if not more, to load content into your pane as it is to show static content.

The jquery UI library offers a built-in tab plugin, but it's rather cumbersome and, in my opinion, pretty pointless when it's so simple to write your own solution.