SideNav Close on Button Click

// Show sideNav
$('.button-show’).sideNav('show');

// Hide sideNav
$('.button-hide').sideNav('hide');

<div id="slide-out" class="side-nav white">
<ul class="custom-scrollbar mr-0 mt-0 mb-0 ps ps--theme_default" style="list-style:none; font-size:14px !important; font-weight: 900; width:100%;" >
<li><div class=”button-collapse”>Close the SideNav</div></li>
<li>
<h4 class="pl-1" style="font-family:Arial !important; font-weight:900 !important;">Some Menu</h4>
</li>
<li>
<ul class="collapsible collapsible-accordion" style="list-style:none; padding-left: 0; margin-bottom: 0; font-size: 14px !important; ">
<li><a class="nav-link waves-effect MyStyle" href="/">Home</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/FAQS">FAQ</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/Forms">Forms</a></li>
<li><a class="nav-link waves-effect MyStyle" href="/contact-us">Contact Us</a></li>
</ul>
</li>
<!--/. Side navigation links -->
<div class="ps__scrollbar-x-rail" style="left: 0px; bottom: 0px;"><div class="ps__scrollbar-x" tabindex="0" style="left: 0px; width: 0px;"></div></div><div class="ps__scrollbar-y-rail" style="top: 0px; right: 0px;"><div class="ps__scrollbar-y" tabindex="0" style="top: 0px; height: 0px;"></div></div></ul>
</div>
<div class="button-show" style="float:right; border: 2px solid black;">Open Side Nav</div>
<style>
.MyStyle {
color: rgba(162, 0, 0, 1) !important;
display: block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 40px;
padding-left: 1.25em;
font-size: 1.25em !important;
font-weight: 900 !important;
text-transform: none;
line-height: unset !important;
font-family: Arial !important;
}
.collapsible-body {
margin: 0 auto !important;
}
.collapsible-body > ul {
list-style: none;
padding: 0 !important;
margin: 0 auto !important;
}
.collapsible-body > ul > li > a {
display: block !important;
font-weight: normal !important;
line-height: 20px !important;
color: rgba(0, 0, 0, 1) !important;
font-size: 1.25em !important;
text-transform: none;
background-color: rgba(255, 255, 255, 1) !important;
color: rgba(0, 0, 0, 1) !important;
font-family: Arial !important;
font-weight: bold !important;
width: auto !important;
height: auto !important;
clear: unset;
white-space: unset;
}
.collapsible-header {
color: rgba(162, 0, 0, 1) !important;
display: block;
padding-top: 10px;
padding-bottom: 10px;
line-height: 40px;
padding-left: 1.25em;
font-size: 1.25em !important;
font-weight: 900 !important;
text-transform: none;
line-height: unset !important;
font-family: Arial !important;
}
.collapsible li .collapsible-header.active,
.collapsible li .collapsible-header:focus {
background-color: rgba(162, 0, 0, 1) !important;
border-color: rgba(162, 0, 0, 1);
color: rgba(255, 255, 255, 1) !important;
}
.collapsible-body > ul > li > a:hover,
.collapsible-body > ul > li > a:focus {
color: rgba(255, 255, 255, 1) !important;
text-decoration: none;
background-color: rgba(162, 0, 0, 1) !important;
}
</style>
<script type=”text/javascript”>
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
Ps.initialize(sideNavScrollbar);

// ****The below code doesn’t work.****
// Show sideNav
$('.button-show’).sideNav('show');

// Hide sideNav
$('.button-collapse').sideNav('hide');

// the below code will only display the SideNav
$('.button-show’).sideNav();
</script>