Custom context in EJ2 JavaScript Sidebar control

2 May 20236 minutes to read

Sidebar has a flexible option to make it initialize, target to any HTML element alongside of the main content of a web page.

By default, Sidebar initializes target to the body element. Using the target property, set target element to initialize the Sidebar inside any HTML element apart from the body element.

If required , zIndex can be set when sidebar act as overlay type.

In the following sample, sidebar is rendered context to a div container element which has the CSS class e-main-content.

ej.base.enableRipple(true);
   //sidebar initialization
   var defaultSidebar = new ej.navigations.Sidebar({
        width: "280px",
        type: "Push",
        target: 'maincontent'
    });
    defaultSidebar.appendTo('#default-sidebar');
    //end of sidebar initialization

    //toggle button initialization
    var togglebtn = new  ej.buttons.Button({iconCss: 'e-icons burg-icon', isToggle: true, content:'Open'}, '#toggle');

    // Close the sidebar on clicking the close button
    document.getElementById('close').onclick = function() {
        defaultSidebar.hide();
        document.getElementById('toggle').classList.remove('e-active');
        togglebtn.content = 'Open'
    };

    //Click the toggle button to expand/collapse the sidebar.
    document.getElementById('toggle').onclick = function() {
        if (document.getElementById('toggle').classList.contains('e-active')) {
            togglebtn.content = 'Close';
            defaultSidebar.show();
        } else {
            togglebtn.content = 'Open';
            defaultSidebar.hide();
        }
    };
<!DOCTYPE html><html lang="en"><head>
    <title>Essential JS 2 Sidebar</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Typescript UI Controls">
    <meta name="author" content="Syncfusion">
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/25.1.35/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    
    
<script src="https://cdn.syncfusion.com/ej2/25.1.35/dist/ej2.min.js" type="text/javascript"></script>
<script src="https://cdn.syncfusion.com/ej2/syncfusion-helper.js" type ="text/javascript"></script>
</head>

<body>
    
    <div id="container">
        <!-- sidebar element declaration -->
        <aside id="default-sidebar">
            <div class="title"> Sidebar content</div>
            <div id="list"></div>
            <div class="sub-title">
                Click the button to close the Sidebar.
            </div>
            <div class="center-align">
                <button id="close" class="e-btn close-btn">Close Sidebar</button>
            </div>
        </aside>
        <!-- end of sidebar element -->
        <!-- main content declaration -->

        <div id="head">
            <button id="toggle" class="e-btn e-info"></button>
        </div>
        <div class="maincontent" style="height:325px;border:1px solid gray">
            <div>
                <div class="title"> Main content</div>
                <div class="sub-title"> content goes here.</div>
            </div>
        </div>
        <!--end of main content -->
    </div>


<script>
var ele = document.getElementById('container');
if(ele) {
  ele.style.visibility = "visible";
}   
      </script>
<script src="index.js" type="text/javascript"></script>
</body></html>