Sidebar effects?

I am looking to get a certain sidebar effect.

Heres the demo
http://tutorialdirectory.net/blogster/

I want the sidebar to be able close and open. I am thing that is javascript?

Any ideas?

 

If you are using PHP, you may try KoolSlideMenu ... 100% exactly what you need.

There is a bundle of skin for you to choose. If you don't like you may build your own skin/style

Have a look: http://www.koolphp.net/support/demos/#koolslidemenu.example_slidemenu_firstlook

 

as kool as the slide menu is, it is an accordion effect - only 1 menu can be open at any given time. also, the sections in the example are kind of detatched from each other, probably built dynamically and independently by the blog software.

would be far easier to do a class based handler on the [+] that he has, the html is already semantic enough to allow for it.

once again, i like to code for mootools and promote the framework so this is what it would look like using the mootools framework:

<div class="category">
      <div class="main-cat">

        <h1>Categories</h1>
        <a href="#" class="expand">-</a> </div>
      <ul>
        <li class="sub-cat"><a href="#">Web Design</a></li>
        <li class="sub-cat"><a href="#">PHP Coding</a></li>
      </ul>

    </div>

HTML:

the idea here is that we have a possible css selector a.expand which should control the visibility of the next element to the parent element of the [-](the ul, in this instance).

<script type="text/javascript">
window.addEvent("domready", function() {
    // folding code by Dimitar Christoff (http://fragged.org/)
    $$("a.expand").addEvents({
        click: function(e) {
            e.stop(); // kill the click event.

            var currentText = this.get("text"), fold = (currentText == "-") ? true : false;
            var newState = {
                display: (currentText == "-") ? "none" : "block", // if it's -, then its visible, + means hidden/none
                text: (currentText == "-") ? "+" : "-"
            }

            this.set("text", newState.text);
            
            // the next element to the click link should be the unordered list or whatever.
            var targetElement = this.getParent().getNext();
            
            // is it a fold?
            this.set("text", newState.text);

            if (fold) {
                // fade it out slowly
                targetElement.fade(0);
                (function() {
                    // wait for animation to end then change display to none.
                    targetElement.setStyle("display", newState.display);
                }).delay(300);
            }
            else {
                targetElement.set({
                    styles: {
                        display: newState.display
                    }
                }).fade(0,1);
            }
        }
    }).set("href", ""); // remove the href so url does not change.
}); // domready
</script>

Code (markup):

a working example of this can be seen on _http://fragged.org/mootools_fold_and_expand.html - should you choose mootools and keep this, i'd appreciate a link back