office-ui panel in script editor hidden after displaying for secoonds

Question

When I paste the below code into a Content Editor WP on SP2016 or SPO it seems to be fine, looks nice and I get no js errors while running it. But on clicking the button, the panel displays for a short while - then disappears again. It never sticks and the page its hosted on seems to refresh.

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.min.css">
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/css/fabric.components.min.css">
<script src="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-js/1.4.0/js/fabric.min.js"></script>

<div class="ms-PanelExample">
  <button class="ms-Button">
    <span class="ms-Button-label">Add site</span> 
  </button>
  <div class="ms-Panel">
    <button class="ms-Panel-closeButton ms-PanelAction-close">
      <i class="ms-Panel-closeIcon ms-Icon ms-Icon--Cancel"></i>
    </button>
    <div class="ms-Panel-contentInner">
      <p class="ms-Panel-headerText">Settings</p>
      <div class="ms-Panel-content">
        <div class="ms-TextField">
          <label class="ms-Label">Title</label>
          <input class="ms-TextField-field" type="text" value="" placeholder="">
        </div>
        <br>
        <div class="ms-Toggle">
          <span class="ms-Toggle-description">Open?</span> 
          <input type="checkbox" id="demo-toggle-3" class="ms-Toggle-input" />
          <label for="demo-toggle-3" class="ms-Toggle-field is-selected" tabindex="0">
            <span class="ms-Label ms-Label--off">No</span> 
            <span class="ms-Label ms-Label--on">Yes</span> 
          </label>
        </div>
        <button class="ms-Button">
            <span class="ms-Button-label">Create site</span> 
        </button>
      </div>
    </div>
  </div>
</div>

<script type="text/javascript">
  var PanelExamples = document.getElementsByClassName("ms-PanelExample");
  for (var i = 0; i < PanelExamples.length; i++) {
    (function() {
      var PanelExampleButton = PanelExamples[i].querySelector(".ms-Button");
      var PanelExamplePanel = PanelExamples[i].querySelector(".ms-Panel");
      PanelExampleButton.addEventListener("click", function(i) {
        new fabric['Panel'](PanelExamplePanel);
      });
    }());
  }
</script>


<script type="text/javascript">
  var ToggleElements = document.querySelectorAll(".ms-Toggle");
  for (var i = 0; i < ToggleElements.length; i++) {
    new fabric['Toggle'](ToggleElements[i]);
  }
</script> 

Answer 1

Figured it out - it was simply a matter of preventing the trigger button from firing it's default postback