javascript sliding (side) panel

Question

The following is a nice "Drop Down Panel" by dynamic drive. http://www.dynamicdrive.com/dynamicindex17/dddropdownpanel.htm

as you can see, it's a panel that pushes the content of the "body" when opening, in "top-down" direction.
i'd like to know if it's possible to change its code in order to have a sliding(side) panel with "right-left" or "left-right" direction, which pushes the "body" content while opening?

thanks in advance

Answer 1

I wouldn't advise using that plugin to do what you want to achieve- if I understand you correctly, the effect you want, can be built yourself reasonably simply using jQuery and absolute positioning in CSS..

<div class="container">
  <a href="#2" class="toggle">toggle</a>
  <div class="hidden">
  </div>
  <div class="body">
  </div>
</div>


.container {position:relative; } 

Position relative means that elements contained will use this as a reference

.hidden {
  width:50px; 
  height:300px; 
  background:pink;
  position:absolute; 
  left:0;z-index:10;
} 

Then position this element absolutely 0 to the left of our reference element and with a z-index to ensure it appears above body element when it is extended.

.body {width:500px; height:300px; background:grey; float:left;}

Finally you need to include jQuery on your page and use something like the following function.

$('.toggle').click(function(){
    if (open != true){
         $(".hidden").animate({width:'300px'}, 500);
         open = true;
    }
    else
    { 
         $(".hidden").animate({width:'50px'}, 500);
         open = false;
    }
    return false;
});

Which will select your a.toggle element, and set a click event up on it. When this fires for the first time open will not have been defined so will not (!=) be true. Then we can animate (api.jquery.com/animate/) the width to the the desired size over 500ms and declare our open variable within the scope of this function to be true. The next time we fire the click event on this particular function, the second section after the } else { will fire instead.

You can try a demo over on http://jsfiddle.net/DcWS2/ . If this isn't quite what your going for, then I'm happy to help further.

EDIT

A more complete solution to your question could look like (http://jsfiddle.net/DcWS2/3/)

$('.hidden').hover(function(){
    $(".hidden").stop().animate({width:'200px'}, 500);
    $(".body").stop().animate({marginLeft:'200px'}, 500);
},function(){ 
    $(".hidden").stop().animate({width:'30px'}, 500);
    $(".body").stop().animate({marginLeft:'30px'}, 500);
});

Answer 2

Not sure exactly how you would do this with Dynamic Drive, but you could do it very easily with jQuery show/hide:

HTML:

<div id="helpPanel">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</div>
<a href="#" id="button" class="ui-state-default ui-corner-all">Toggle Effect</a>
<div class="normal">
    Maecenas ultrices feugiat nibh sit amet mattis. Nullam et sapien id turpis tempus tincidunt non ac sapien.
</div>

CSS:

#helpPanel {  border: 1px solid red; overflow: auto; display: none; }
.normal { margin-top: 15px; border: 1px solid blue; }

JavaScript:

var state = true;
var $panel = $("#helpPanel");
$("#button").on("click" ,function() {
    if ( state ) {
        $panel.show(1000);
    } else {
        $panel.hide(1000);
    }
    state = !state;
});

Working Demo