title: Add a collapse/expand onClick nested submenu to an existing menu tree
body: <p>I'm working with the existing third-party code below for a single-level expandable/collapsible menu. I want to add a nested sub-menu that functions the same as the top-level &quot;opener&quot; span class.</p>
  <p>However, when I try to just duplicate the &quot;opener&quot; CSS and JS into a new &quot;sub-opener&quot; class, the sub-menu is always expanded (visible) and won't collapse with the onClick event. Maybe because it's inheriting the &quot;active&quot; class from the &quot;opener&quot; class? So, how could I:</p>
  <ol>
  <li>make the &quot;opener&quot; span class logic ignore the nested &quot;sub-opener&quot; span class, and/or</li>
  <li>do something so that the nested &quot;sub-opener&quot; class operates independently and in parallel to the parent &quot;opener&quot; class?</li>
  </ol>
  <p><strong>CSS</strong></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-css lang-css prettyprint-override"><code>#menu ul a.opener, #menu ul span.opener {
                  -moz-transition: color 0.2s ease-in-out;
                  -webkit-transition: color 0.2s ease-in-out;
                  -ms-transition: color 0.2s ease-in-out;
                  transition: color 0.2s ease-in-out;
                  text-decoration: none;
                  -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
                  position: relative;
                  font-size: 1em;
              }
  
                  #menu ul a.opener:before, #menu ul span.opener:before {
                      -moz-osx-font-smoothing: grayscale;
                      -webkit-font-smoothing: antialiased;
                      display: inline-block;
                      font-style: normal;
                      font-variant: normal;
                      text-rendering: auto;
                      line-height: 1;
                      text-transform: none !important;
                      font-family: 'Font Awesome 5 Free';
                      font-weight: 900;
                  }
  
                  #menu ul a.opener:before, #menu ul span.opener:before {
                      -moz-transition: color 0.2s ease-in-out, -moz-transform 0.2s ease-in-out;
                      -webkit-transition: color 0.2s ease-in-out, -webkit-transform 0.2s ease-in-out;
                      -ms-transition: color 0.2s ease-in-out, -ms-transform 0.2s ease-in-out;
                      transition: color 0.2s ease-in-out, transform 0.2s ease-in-out;
                      color: #3e3935;
                      content: '\f078';
                      position: absolute;
                      right: 0;
                      padding: 0.6em 0!important;
                  }
  
                  #menu ul a.opener:hover:before, #menu ul span.opener:hover:before {
                      color: #00a5b5;
                  }
  
                  #menu ul a.opener.active + ul, #menu ul span.opener.active + ul {
                      display: block;
                  }
  
                  #menu ul a.opener.active:before, #menu ul span.opener.active:before {
                      -moz-transform: rotate(-180deg);
                      -webkit-transform: rotate(-180deg);
                      -ms-transform: rotate(-180deg);
                      transform: rotate(-180deg);
                  }</code></pre>
  </div>
  </div>
  </p>
  <p><strong>JS</strong></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>// Menu.
          var $menu = $('#menu'),
              $menu_openers = $menu.children('ul').find('.opener');
  
          // Openers.
              $menu_openers.each(function() {
  
                  var $this = $(this);
  
                  $this.on('click', function(event) {
  
                      // Prevent default.
                          event.preventDefault();
  
                      // Toggle.
                          $menu_openers.not($this).removeClass('active');
                          $this.toggleClass('active');
  
                      // Trigger resize (sidebar lock).
                          $window.triggerHandler('resize.sidebar-lock');
  
                  });
  
              });</code></pre>
  </div>
  </div>
  </p>
  <p><strong>HTML</strong></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-html lang-html prettyprint-override"><code>&lt;ul&gt;
  &lt;li&gt;
  &lt;span class="opener active"&gt;&lt;a href="#"&gt;Chapter 1&lt;/a&gt;&lt;/span&gt;
    &lt;ul&gt;
      &lt;li&gt;&lt;a href="01_00.html"&gt;Page 1.0&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="01_01.html"&gt;Page 1.1&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;span class="sub-opener"&gt;&lt;a href="#"&gt;Page 1.2 Sub-Menu&lt;/a&gt;&lt;/span&gt;
        &lt;ul&gt;
          &lt;li&gt;&lt;a href="01_02a.html"&gt;Page 1.2A&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a href="01_02b.html"&gt;Page 1.2B&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li&gt;&lt;a href="01_03.html"&gt;Page 1.3&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="01_04.html"&gt;Page 1.4&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;</code></pre>
  </div>
  </div>
  </p>