title: selecting jquery accordion active panel
body: <p>I am trying to make the accordions active panel scroll to the top of the window so the clickable accordion <code>&lt;h3&gt;</code> tag scrolls to the top and the <code>&lt;h3&gt;</code> tags content laid out below, I am kind of achieving this but not entirely.</p>
  
  <p>I have a fade in fade out function already set on the header for a scroll function to hide the header whilst scrolling, the problem I am coming up against is that sometimes the header re-appears over the accordion when clicking other accordion tabs, this is dependent on the behavior from the accordion function, namely when the contents slides down instead of up it automatically reveals my header blocking out the view of the according <code>&lt;h3&gt;</code> tag and content as it is using my previous function that fades the header?</p>
  
  <p>How can I make this so that when the accordion panel that was clicked is open there is no chance of my header reappearing until the whole accordion element does not have any panel active? I know that the accordion function has a class of <code>.ui-state-active</code> can I use this to trigger turning the header off/on whilst the accordion is active with any panel open the header remains hidden until the functions returns to  its active: false state when all panels are closed?</p>
  
  <p>Thanks</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>$(function () {
      var icons = {
          header: "ui-icon-circle-plus",
          activeHeader: "ui-icon-circle-arrow-e"
      };
      $('#accordion').accordion({
          autoHeight: false,
          autoFill: true,
          collapsible: true,
          event: 'click',
          active: false,
          icons: icons,
          animate: 300 // collapse will take 300ms
      });
      $('#accordion h3').bind('click', function () {
          var self = this;
          setTimeout(function () {
              theOffset = $(self).offset();
              $('body,html').animate({ scrollTop: theOffset.top });
          }, 310); // ensure the collapse animation is done
      });
  
  
  });
  $(function () {
      var header = $('header');
  
      $('#accordion h3').on('click', function () {
          if ($('#accordion h3').hasClass('ui-state-active')) header.hide();
          else if ($('#accordion h3').hasClass(!'ui-state-active')) header.show();
  
      });
  });
  
  $(function () {
      'use strict';
      var lastscrolltop = 0;
      //header scroll
      $(document).on('scroll', function () {
          var st = $(document).scrollTop(),
          dElem = $(document),
          header = $('header');
  
          if (st &gt; lastscrolltop)
              header.fadeOut(500);
          else
              header.fadeIn(500);
          lastscrolltop = st;
      });
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>body {
      width: 300px;
  }
  
  #container {
      height: auto;
      width: 300px;
  }
  
  #slider-home {
      height: 100vh;
      width: auto;
      background: blue;
  }
  
  header {
      width: 300px;
      position: fixed;
      height: 70px;
      background: red;
      z-index: 9;
  }
  
  #accordion {
      display: flex;
      flex-direction: column;
      height: 100%;
  }
  
  .ui-accordion .ui-accordion-header {
      display: block;
      cursor: pointer;
      position: relative;
      margin: 0;
      min-height: 0;
  }
  
  .ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br {
      border-bottom-right-radius: 0;
  }
  
  .ui-corner-all, .ui-corner-bottom, .ui-corner-left, .ui-corner-bl {
      border-bottom-left-radius: 0;
  }
  
  .ui-corner-all, .ui-corner-top, .ui-corner-right, .ui-corner-tr {
      border-top-right-radius: 0;
  }
  
  .ui-corner-all, .ui-corner-top, .ui-corner-left, .ui-corner-tl {
      border-top-left-radius: 0;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;link href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet"/&gt;
  &lt;body&gt;
      &lt;div class="container"&gt;
          &lt;header&gt;&lt;/header&gt;
          &lt;main role="main"&gt;
              &lt;section&gt;
                  &lt;div id="slider-home" class="vhslider"&gt;
                  &lt;/div&gt;
              &lt;/section&gt;
              &lt;div id="accordion"&gt;
  
                  &lt;h3&gt;Photographic Services&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                          Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                      &lt;/p&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                  &lt;/div&gt;
  
                  &lt;h3&gt;Product Photography&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                          Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                      &lt;/p&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                  &lt;/div&gt;
  
                  &lt;h3&gt;e-commerce Photography&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                          Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                      &lt;/p&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                  &lt;/div&gt;
  
                  &lt;h3&gt;Food Photography&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                          Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                      &lt;/p&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                  &lt;/div&gt;
  
                  &lt;h3&gt;Lifestyle Photography&lt;/h3&gt;
                  &lt;div&gt;
                      &lt;p&gt;
                          Tempor enim, sem cras mauris amet non convallis aenean, imperdiet elementum. Sit nam pretium quis habitasse sollicitudin mauris, sapien lacus phasellus est dignissim, lacus eaque convallis in porttitor eleifend. Fermentum sociosqu donec, ut at pede nec massa. Ornare risus mauris, vel imperdiet consequuntur. Consectetuer in wisi massa scelerisque amet, sed sed, volutpat laoreet ut mollis proin quisque, quam sapien volutpat at eget et, phasellus nunc.
                          Nisl cursus risus sagittis semper, nulla id vel aenean luctus fringilla elit.
                      &lt;/p&gt;
                      &lt;figure&gt;&lt;/figure&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt; &lt;!--- end of accordion id ---&gt;
  
          &lt;/main&gt;
      &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>