Steve, Before you jump in and start copying and pasting code from here.. I want to give you some important “nuggets” to help you quick start..

1. There some “hard coded’ aspects to the code below..

a. var SidePanelDivId = 'dvPanel';

b. var MainContentElementID = 'frmExamDefault';

2. “Transition” in 2 places in the style sheet work together…

a. .sidePanel{…transition: 1s;

b. .SidePanelMainContent{…transition: margin-left 1s;

3. The main content element, (many cases will by your <Form>), has a specific ID and Class: <form id="frmExamDefault" runat="server" class='SidePanelMainContent'>
and the sitedbar div has a specific ID and Class: <div id="dvPanel" class="sidePanel">PlaceHolderForData</div>

 ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Check Out This Link For A Working Example…

1. Include SidePanel.css  (code shown below will be placed in this .css file)

a. <link rel="stylesheet" type="text/css" href="SidePanel.css">

.sidePanel {

  height: 100%;

  width: 0;

  position: fixed;

  z-index: 1;

  top: 0;

  left: 0;

  overflow-x: hidden;

  transition: 1s;

  padding-top: 60px;

}

.sidePanelclosebtn {

  position: absolute;

  top: 0;

  right: 5px;

  font-size: 12px;

  margin-left: 50px;

  background-color: red;

  cursor: pointer;

  color: white;

  padding: 10px 15px;

  border: none;

}

.SidePanelMainContent {

  transition: margin-left 1s;

  padding: 6px;

}

2. Add this div to the page..  it will initially be hidden because the class “sidePanel” sets the width to zero..

            <div id="dvPanel" class="sidePanel">PlaceHolderForData</div>

IMPORTANT INFO HERE

3. Give an ID to the content that will “make room” by sliding right.  In the below case it’s frmExamDefault AND give it the class “SidePanelMainContent”
<form id="frmExamDefault" runat="server" class='SidePanelMainContent'>

4. Add your ‘Open’ and ‘Close’ buttons to call our javascript functions openSidePanel and closeSidePanel

<!-- Parameters: HTMLPageToLoad(Optional),%Width,%Height -->

                  <asp:LinkButton ID="lbOpenSidePanel" runat="server" OnClientClick="openSidePanel('child.htm',.5);return false;">Open</asp:LinkButton>

                  <br />

                  <asp:LinkButton ID="lbCloseSidePanel" runat="server" OnClientClick="closeSidePanel();return false;">Close</asp:LinkButton>

5.        Add the SlidePanel Javascript functions..

    // *********************************************************************************************

    // *********************************************************************************************

    //            SLIDE PANEL

    // *********************************************************************************************

    // *********************************************************************************************

IMPORTANT INFO HERE..

//Specify the Panel ID...

var SidePanelDivId = 'dvPanel';

//What ever is in this element will slide over to make room for the SidePanel

var MainContentElementID = 'frmExamDefault';

function openSidePanel(ExternalHTMLFileToLoad, PercentOfWindowWidth) {

        //Changing the width of the Div to something greater than zero will get it to show.

document.getElementById(SidePanelDivId).style.width = window.innerWidth * PercentOfWindowWidth + 'px';

document.getElementById(MainContentElementID).style.marginLeft = window.innerWidth * PercentOfWindowWidth + 'px';

        //Add our external html if you wish......Otherwise it will just show what's already in the dvPanel

        if (ExternalHTMLFileToLoad != '') {

            //Add our CLOSE button...

document.getElementById(SidePanelDivId).innerHTML = "<a id='lnkClose' href='javascript:void(0)' class='sidePanelclosebtn' >X</a>"

            //Add the onclick event  

document.getElementById('lnkClose').setAttribute("onclick", "closeSidePanel()");

            //Add the externa html page...

document.getElementById(SidePanelDivId).innerHTML = document.getElementById(SidePanelDivId).innerHTML + '<object id="objPanel" width="100%" type="text/html"  ></object>';

document.getElementById('objPanel').setAttribute("data", ExternalHTMLFileToLoad);

        }

        else {

            //Add our CLOSE button and append the already present content...

document.getElementById(SidePanelDivId).innerHTML = "<a id='lnkClose' href='javascript:void(0)' class='closebtn' >X</a>" + document.getElementById(SidePanelDivId).innerHTML

            //Add the onclick event

document.getElementById('lnkClose').setAttribute("onclick", "closeSidePanel()");

        }

    }

    function closeSidePanel() {

document.getElementById(SidePanelDivId).style.width = "0";

document.getElementById(MainContentElementID).style.marginLeft = "0";

    }

    // *********************************************************************************************

    // *********************************************************************************************

   // *********************************************************************************************

    // *********************************************************************************************