How to apply toggle for child elements

Question

When I clicked the button, the whole side bar is toggling, but I need only the side menus to get toggle. HTML part

<nav id="sidebar">
    <div class="sidebar-header">
         <img src="/fintantra/images/logo.jpg" style="margin-left:4px;">
               <div class="btn-group">
                .....
                ......
    <ul class="list-unstyled components" id="demo">
           <li>
              <a href="#adminSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                  <i class="fas fa-user"></i>&nbsp;
                     FDR
                </a>
             <ul class="collapse list-unstyled" id="adminSubmenu">
                  <li>
                      <a href="fpo-profile.html"><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;FPO Profile</a>
                   </li>
                        ....
              </ul>
             </li>
              <li>
                  <a href="#fisSubmenu" data-toggle="collapse" aria-expanded="false" class="dropdown-toggle">
                        <i class="fas fa-user"></i>&nbsp;
                        FIS
                  </a>
                    <ul class="collapse list-unstyled" id="fisSubmenu">
                  <li>
                      <a href="fpo-profile.html"><i class="fa fa-arrows-alt" aria-hidden="true"></i>&nbsp;FPO Profile</a>
                   </li>
                        ....
              </ul>
              </li>
              ...
        </ul>
</nav>
<button type="button" id="sidebarCollapse" class="btn btn-info">
            <i class="fas fa-align-left"></i>&nbsp;&nbsp;&nbsp;&nbsp;
            <span>KANCHI</span>
            </button>

JS Part

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#sidebar').toggleClass('active');
            });
        });
    </script>

The above code is working for the whole sidebar and when I replace ('#sidebar') with ('#demo') it is not toggling. I'm using demo as id in the menu ul section.

Answer 1

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#demo').toggleClass('active');
            });
        });
</script>

Answer 2

<script type="text/javascript">
        $(document).ready(function () {
            $('#sidebarCollapse').on('click', function () {
                $('#demo').toggle();
            });
        });
</script>