Use hidden and style to show/hide steps

Remove the reliance on .shepherd-open and the CSS, to get steps showing/hiding just via JS.

Resolves #166

docs/welcome/js/welcome.js

@@ -9,14 +9,14 @@
     var shepherd;
     shepherd = new Shepherd.Tour({
       defaults: {
-        classes: 'shepherd-element shepherd-open shepherd-theme-arrows',
+        classes: 'shepherd-element shepherd-theme-arrows',
         showCancelLink: true
       }
     });
     shepherd.addStep('welcome', {
       text: ['Shepherd is a javascript library for guiding users through your app. It uses <a href="https://popper.js.org/">Popper.js</a>, another open source library, to position all of its steps.', 'Popper makes sure your steps never end up off screen or cropped by an overflow. Try resizing your browser to see what we mean.'],
       attachTo: '.hero-welcome bottom',
-      classes: 'shepherd shepherd-open shepherd-theme-arrows shepherd-transparent-text',
+      classes: 'shepherd shepherd-theme-arrows shepherd-transparent-text',
       buttons: [
         {
           action: shepherd.cancel,

src/css/helpers/_popper.scss

@@ -1,16 +1,10 @@
 @mixin popper($theme-prefix: "popper") {
-  .#{$theme-prefix}-element, .#{$theme-prefix}-element * {
-    &, &:after, &:before {
+  .#{$theme-prefix}-element,
+  .#{$theme-prefix}-element * {
+    &,
+    &:after,
+    &:before {
       box-sizing: border-box;
     }
   }
-
-  .#{$theme-prefix}-element {
-    position: absolute;
-    display: none;
-
-    &.#{$theme-prefix}-open {
-      display: block;
-    }
-  }
 }

src/js/shepherd.js

@@ -390,7 +390,9 @@ class Step extends Evented {
       this.render();
     }
 
-    this.el.classList.add('shepherd-open');
+    this.el.hidden = false;
+    // We need to manually set styles for < IE11 support
+    this.el.style.display = 'block';
 
     document.body.setAttribute('data-shepherd-step', this.id);
 
@@ -408,7 +410,9 @@ class Step extends Evented {
   hide() {
     this.trigger('before-hide');
 
-    this.el.classList.remove('shepherd-open');
+    this.el.hidden = true;
+    // We need to manually set styles for < IE11 support
+    this.el.style.display = 'none';
 
     document.body.removeAttribute('data-shepherd-step');
 
@@ -425,7 +429,7 @@ class Step extends Evented {
   }
 
   isOpen() {
-    return this.el && this.el.classList.hasClass('shepherd-open');
+    return this.el && !this.el.hidden;
   }
 
   cancel() {