title: Hiding Panel - by default is open when the page loads
body: <p>The issue is when the page loads, by default the panel at the bottom of the page is open. I need to set when the page loads the panel should be closed and the functioning will remain same as in current, that when we click the panel opens and again clicked the panel will be closed or vice-versa.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function($) {
  
    jQuery(document).ready(function() {
  
      Panel.init();
  
      $(document).on('click', '.tab-controller', function() {
        Panel.togglePanel();
      });
  
    });
  
    var Panel = {
  
      isVisible: true,
      showMessage: null,
      hideMessage: null,
      animationDuration: 650,
      animationEasing: 'linear',
  
      init: function() {
  
      },
  
      hidePanel: function() {
        $('.panel-wrapper').animate({
          bottom: -(Panel.getAnimationOffset())
        }, Panel.animationDuration, Panel.animationEasing, function() {
          Panel.isVisible = false;
          Panel.updateTabMessage();
        });
      },
  
      showPanel: function() {
        $('.panel-wrapper').animate({
          bottom: 0
        }, Panel.animationDuration, Panel.animationEasing, function() {
          Panel.isVisible = true;
          Panel.updateTabMessage();
        });
      },
  
      togglePanel: function() {
        ((this.isVisible) ? this.hidePanel : this.showPanel)();
      },
  
      updateTabMessage: function() {
        if (this.isVisible) {
          $('.tab-controller .close').show();
          $('.tab-controller .show').hide();
        } else {
          $('.tab-controller .close').hide();
          $('.tab-controller .show').show();
        }
      },
  
      getAnimationOffset: function() {
        return $('.panel-content').height();
      }
  
    }
  })(jQuery);</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.panel-wrapper * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .panel-wrapper {
    position: fixed;
    left: 0;
    bottom: 0;
    overflow: hidden;
    width: 100%;
    font-family: sans-serif;
  }
  .panel-controller {
    position: relative;
    overflow: hidden;
    width: 100%;
  }
  .tab-controller {
    float: right;
    margin-right: 50px;
    padding: 10px 10px 5px;
    background-color: #8C293B;
    -webkit-border-radius: 15px 15px 0 0;
    -moz-border-radius: 15px 15px 0 0;
    border-radius: 15px 15px 0 0;
  }
  .tab-controller * {
    display: block;
    font-family: sans-serif;
    font-size: 16px;
    font-weight: bold;
    color: white;
    cursor: pointer;
  }
  .tab-controller .show {
    display: none;
  }
  .panel-content {
    overflow: hidden;
    width: 100%;
    background-color: #8C293B;
  }
  .panel-content .content {
    overflow: hidden;
    margin: 0 auto;
    max-width: 900px;
    width: 98%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;div class="panel-wrapper"&gt;
    &lt;div class="panel-controller"&gt;
      &lt;div class="tab-controller"&gt;
        &lt;span class="close"&gt;CLOSE PANEL&lt;/span&gt;
        &lt;span class="show"&gt;OPEN PANEL&lt;/span&gt;
      &lt;/div&gt;
      &lt;!-- tab-controller --&gt;
    &lt;/div&gt;
    &lt;!-- panel-controller --&gt;
    &lt;div class="panel-content"&gt;
      &lt;div class="content clearfix"&gt;
        &lt;div&gt;This
          &lt;br/&gt;Space
          &lt;br/&gt;is
          &lt;br/&gt;inside
          &lt;br/&gt;panel.&lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- content --&gt;
    &lt;/div&gt;
    &lt;!-- panel-content --&gt;
  &lt;/div&gt;
  &lt;!-- panel-wrapper --&gt;</code></pre>
  </div>
  </div>
  </p>