All the scripts and code adaptions
Forum
dhtmlgoodies - Slide Pane with multimple panes
Original Script: http://www.dhtmlgoodies.com/index.html?whichScript=slide_in_pane
Tested: IE7, Firefox 2.0.0.1,Opera 9.02
logo

Close


To accomplish this, do this:

logo

Close


This is a nice red pane


Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
Your text and images would go here
logo

Close
And now a little bit about myself
Show panel 1  | Show panel 2  | Show panel 3

How to adapt script

  1. Create class for each panel (define colors etc)
  2. Create new panel with UNIQUE id
  3. Add links to open/close each panel indicating the id of the panel to move: 
    
<a href="#" onclick="initSlideLeftPanel('dhtmlgoodies_leftPanel3');return false">
Show panel 3</a>
  4. Look for the "initSlideLeftPanel()" function and replace the first few lines: 
    function initSlideLeftPanel(expandOnly)
{
  if(slideInProgress)return;
  if(!slideLeftPanelObj){
    if(document.getElementById('dhtmlgoodies_leftPanel')){	
      // Object exists in HTML code?
      slideLeftPanelObj = document.getElementById('dhtmlgoodies_leftPanel');
      if(panelPosition == 1)slideLeftPanelObj.style.width = '100%';
    }else{	
      // Object doesn't exist -> Create <div> dynamically
      slideLeftPanelObj = document.createElement('DIV');
      slideLeftPanelObj.id = 'dhtmlgoodies_leftPanel';
      slideLeftPanelObj.style.display='none';
      document.body.appendChild(slideLeftPanelObj);
    }
    //etc.
    with the following code which now uses the specific id of the panel to be closed: 
    var z_index=10;
function initSlideLeftPanel(the_panel,expandOnly)
{
  
  // reset "slideLeftPanelObj" if different from last one for closing panes
  if(the_panel!=slideLeftPanelObj.id)slideLeftPanelObj="";
    
    if(slideInProgress)return;
      if(!slideLeftPanelObj){
        z_index++;
        if(document.getElementById(the_panel)){	
          // Object exists in HTML code?
          slideLeftPanelObj = document.getElementById(the_panel);
          slideLeftPanelObj.style.zIndex = z_index;
          if(panelPosition == 1)slideLeftPanelObj.style.width = '100%';
        }else{	
          // Object doesn't exist -> Create <div> dynamically
          slideLeftPanelObj = document.createElement('DIV');
          slideLeftPanelObj.id = the_panel;
          slideLeftPanelObj.style.display='none';
          //slideLeftPanelObj.style.z-index='none';
          document.body.appendChild(slideLeftPanelObj);
        }
        //etc.
    Note that I have also added an increaseing z-index for each panel to ensure that it slides out above the previous panel.
  5. To have a specific panel slide out on load like in this example, modify the <body> tag with this: 
    <body onload="initSlideLeftPanel('NAME OF PANEL TO SLIDE OUT');return false;">