Multiple EJ2 JavaScript Sidebar control

28 Jan 20257 minutes to read

Two Sidebars can be initialized on a web page with the same main content. Sidebars can be positioned on the right or left side of the main content using the position property.

The HTML element with the class name e-main-content is considered the main content, and both Sidebars will act as side content relative to this main content area of the web page.

ej.base.enableRipple(true);

//left Sidebar initialization
var leftSidebar = new ej.navigations.Sidebar({
    width: "200px",
    type: 'Push'
});
leftSidebar.appendTo('#default');
//end of leftSidebar initialization

//Right Sidebar initialization
var rightSidebar = new ej.navigations.Sidebar({
    width: "200px",
    position: 'Right',
    type: 'Push'
});
rightSidebar.appendTo('#default1');
//end of rightSidebar initialization

// Toggle(Open/Close) the left Sidebar
document.getElementById('toggle-btn').onclick = function () {
    leftSidebar.toggle();
};
// Toggle(Open/Close) the right Sidebar
document.getElementById('toggle-btn2').onclick = function () {
    rightSidebar.toggle();
};
<!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/29.1.33/ej2-base/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-buttons/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-lists/styles/material.css" rel="stylesheet">
    <link href="https://cdn.syncfusion.com/ej2/29.1.33/ej2-navigations/styles/material.css" rel="stylesheet">
    <link href="styles.css" rel="stylesheet">
    <script src="https://cdn.syncfusion.com/ej2/29.1.33/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">
        <!-- left Sidebar element -->
        <aside id="default">
            <div class="title"> Left Sidebar content</div>
        </aside>
        <!-- end of left Sidebar element -->
        <!-- right Sidebar element -->
        <aside id="default1">
            <div class="title">Right Sidebar content</div>
        </aside>
        <!-- end of right Sidebar element -->
        <!-- main content declaration -->
        <div class="e-main-content" style="font-size:16px;padding:100px" ;="">
            <p>Place your main content here.....</p>
            <button id="toggle-btn" class="e-btn">Toggle Sidebar1</button>
            <br>
            <br>
            <button id="toggle-btn2" class="e-btn">Toggle Sidebar2</button>
        </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>
    <style>
        .header {
            width: 100%;
            height: 40px;
            font-size: 20px;
            line-height: 40px;
            font-weight: 500;
            background: #eee;
            display: inline-block;
        }

        .e-main-content {
            text-align: center;
            height: 100vh;
            background: #f5f5f5;
        }

        .title {
            text-align: center;
            font-size: 20px;
            padding: 15px;
        }

        #default,
        #default1 {
            background-color: rgb(25, 118, 210);
            color: #ffffff;
            overflow: hidden;
        }
    </style>
</body>

</html>
#container {
	visibility: hidden;
  }
  
  #loader {
	color: #008cff;
	height: 40px;
	width: 30%;
	position: absolute;
	top: 45%;
	left: 45%;
  }