title: Setting accordion to active based on active child
body: <p>The top accordion section is 'active'. I  want to achieve a menu that becomes active based on the child elements. For example; as you can see 'Dashboard' is set to active with an 'active' class because it is the current page. </p>
  
  <p>How can I make an accordion active if a child element has the class 'active'? (like a dropdown menu on a website)</p>
  
  <p><a href="https://i.stack.imgur.com/y1GDA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/y1GDA.png" alt="Navigation Accordion"></a></p>
  
  <p>Code:</p>
  
  <pre><code>&lt;nav id="side-nav"&gt;
      &lt;div class="accordion ui-accordion ui-widget ui-helper-reset" role="tablist"&gt;
          &lt;h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-header-active ui-state-active ui-corner-top ui-accordion-icons" role="tab" id="ui-accordion-1-header-0" aria-controls="ui-accordion-1-panel-0" aria-selected="true" tabindex="0"&gt;
              &lt;span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-s"&gt;&lt;/span&gt;Core Application
          &lt;/h3&gt;
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content-active" id="ui-accordion-1-panel-0" aria-labelledby="ui-accordion-1-header-0" role="tabpanel" aria-expanded="true" aria-hidden="false" style="display: block; height: 360px;"&gt;
              &lt;a class="active" href=""&gt;Dashboard&lt;/a&gt;
              &lt;a href="customers"&gt;Customers&lt;/a&gt;
              &lt;a href="staff"&gt;Staff&lt;/a&gt;
              &lt;a href="tours"&gt;Tours&lt;/a&gt;
              &lt;a href="users"&gt;Users&lt;/a&gt;
              &lt;a href="settings"&gt;Settings&lt;/a&gt;
          &lt;/div&gt;
          &lt;h3 class="ui-accordion-header ui-helper-reset ui-state-default ui-corner-all ui-accordion-icons" role="tab" id="ui-accordion-1-header-1" aria-controls="ui-accordion-1-panel-1" aria-selected="false" tabindex="-1"&gt;
              &lt;span class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;Another menu
          &lt;/h3&gt;
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom" id="ui-accordion-1-panel-1" aria-labelledby="ui-accordion-1-header-1" role="tabpanel" aria-expanded="false" aria-hidden="true" style="display: none; height: 360px;"&gt;
              &lt;a href="medication/records"&gt;&lt;b class=""&gt;&lt;/b&gt;Medical Records&lt;/a&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;script&gt; $(".accordion").accordion();&lt;/script&gt;
  &lt;/nav&gt;
  </code></pre>