Code

<script>
  const cftTrigger = document.getElementById('cft-trigger');
  new OnoffCanvas('#cft', {
    hideByEsc: false,
    createDrawer: false
  }).on('show.onoffcanvas', function () {
    cftTrigger.innerHTML = 'Hide OnoffCanvas';
    cftTrigger.classList.remove('btn-info');
    cftTrigger.classList.add('btn-warning');
  }).on('hide.onoffcanvas', function () {
    cftTrigger.innerHTML = 'Show Onoffcanvas';
    cftTrigger.classList.add('btn-info');
    cftTrigger.classList.remove('btn-warning');
  });
</script>