Search results

Open and Close the Sidebar in JavaScript Sidebar control

Opening and closing the Sidebar can be achieved with built-in public methods.

  • show(): Method to open the Sidebar.
  • hide(): Method to close the Sidebar.
  • toggle(): Method to toggle between open and close states of the Sidebar.

In the following sample, toggle method has been used to show or hide the Sidebar on button click.

Source
Preview
app.ts
index.html
styles.css
import { Sidebar } from '@syncfusion/ej2-navigations';
import { enableRipple } from '@syncfusion/ej2-base';
enableRipple(true);

//Sidebar initialization
let defaultSidebar: Sidebar = new Sidebar({
    showBackdrop: false,
    open:function(e)
    {
        console.log("Sidebar is opened");
    },
    close: function(e)
    {
       console.log("Sidebar is closed");
    }
});
defaultSidebar.appendTo('#default');
//end of Sidebar initialization

// Toggle(Open/Close) the Sidebar
document.getElementById('toggle').onclick = (): void => {
    defaultSidebar.toggle();
};

// Close the Sidebar
document.getElementById('close').onclick = (): void => {
    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="//cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-buttons/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-lists/styles/material.css" rel="stylesheet" />
    <link href="//cdn.syncfusion.com/ej2/ej2-navigations/styles/material.css" rel="stylesheet" />
    <link href="styles.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
</head>

<body>
    <div id='loader'>LOADING....</div>
    <div id='container'>
        <!-- sidebar element declaration-->
        <aside id="default">
            <div class="title"> Sidebar content</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>
            <div class="title">Main content</div>
            <div class="sub-title"> Click the button to open/close the Sidebar.</div>
            <div style="padding:20px" class="center-align">
                <button id="toggle" class="e-btn e-info">Toggle Sidebar</button>
            </div>
        </div>
        <!--end of main content declaration -->
</body>

</html>
#container {
  visibility: hidden;
}

#loader {
  color: #008cff;
  height: 40px;
  width: 30%;
  position: absolute;
  top: 45%;
  left: 45%;
}
#close,#close:hover,#close:active,#close:focus{ /* csslint allow: adjoining-classes*/
	background: #fafafa;
	color:black
}
.header {
 	width:100%;
	height: 40px;
	font-size:20px;
	line-height: 40px;
	font-weight: 500;
	background: #eee;
	display: inline-block;
}
.center-align {
	text-align: center;
	padding: 20px;
}

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

.sub-title {
	text-align: center;
	font-size: 16px;
	padding: 10px;
}

.center {
	text-align: center;
	display: none;
	font-size: 13px;
	font-weight: 400;
	margin-top: 20px;
}

#wrapper {
	display: block;
}

.sb-content-tab .center { /* csslint allow: adjoining-classes*/
	display: block;
}

.sb-content-tab #wrapper { /* csslint allow: adjoining-classes*/
	display: none;
}

.right {
	float: right;
}

body {
	margin: 0;
}

#default {
	background-color: rgb(25, 118, 210);
	color: #ffffff;
}

.close-btn:hover {
	color: #fafafa;
}

.content-section { /* csslint allow: adjoining-classes */
	padding: 30px 10px 10px 20px;
}
.book .ej2-sample-frame { /* csslint allow: adjoining-classes */
	padding: 0;
}