Add a collapse/expand onClick nested submenu to an existing menu tree

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 "opener" span class.

However, when I try to just duplicate the "opener" CSS and JS into a new "sub-opener" class, the sub-menu is always expanded (visible) and won't collapse with the onClick event. Maybe because it's inheriting the "active" class from the "opener" class? So, how could I:

  1. make the "opener" span class logic ignore the nested "sub-opener" span class, and/or
  2. do something so that the nested "sub-opener" class operates independently and in parallel to the parent "opener" class?


#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 + ul, #menu ul + ul {
                    display: block;

                #menu ul, #menu ul {
                    -moz-transform: rotate(-180deg);
                    -webkit-transform: rotate(-180deg);
                    -ms-transform: rotate(-180deg);
                    transform: rotate(-180deg);


// 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.

                    // Toggle.

                    // Trigger resize (sidebar lock).




<span class="opener active"><a href="#">Chapter 1</a></span>
    <li><a href="01_00.html">Page 1.0</a></li>
    <li><a href="01_01.html">Page 1.1</a></li>
    <li><span class="sub-opener"><a href="#">Page 1.2 Sub-Menu</a></span>
        <li><a href="01_02a.html">Page 1.2A</a></li>
        <li><a href="01_02b.html">Page 1.2B</a></li>
    <li><a href="01_03.html">Page 1.3</a></li>
    <li><a href="01_04.html">Page 1.4</a></li>