req help on jquery sidedrawer menu

req help on jquery sidedrawer menu

Hi All,

I have recently started using Jquery/JS  scripts and found an script (sidedrawer) that I am using right now:
The script is working fine except for that when I open my page the menu is being shown by default instead of collapsed. The script I am using is as per below, how can I modify my script in such a way that it will collapse and only open once I click the Open button?

html:
<b  class="closebtn js-hide-sidedrawer"><font size=2>Open</font></b>  

<div id="sidedrawer" class="mui--no-user-select"> 
 <div style='float:right;cursor:hand;font-size:20px' class="closebtn js-hide-sidedrawer"Close</div>

Jquery/JS:

jQuery(function($) {
  var $bodyEl = $('body'),
      $sidedrawerEl = $('#sidedrawer');
  
  
  function showSidedrawer() {
    // show overlay
    var options = {
      onclose: function() {
        $sidedrawerEl
          .removeClass('active')
          .appendTo(document.body);
      }
    };
    
    var $overlayEl = $(mui.overlay('on', options));
    
    // show element
    $sidedrawerEl.appendTo($overlayEl);
    setTimeout(function() {
      $sidedrawerEl.addClass('active');
    }, 20);
  }
  
  
  function hideSidedrawer() {
    $bodyEl.toggleClass('hide-sidedrawer');
  }
  
  
  $('.js-show-sidedrawer').on('click', showSidedrawer);
  $('.js-hide-sidedrawer').on('click', hideSidedrawer);
  
  
  var $titleEls = $('strong', $sidedrawerEl);
  
  $titleEls
    .next()
    .hide();
  
  $titleEls.on('click', function() {
    $(this).next().slideToggle(200);
  });
});


Your help is appreciated. thanks.

M