<li class="nav-item">
            <a class="nav-link collapsed" href="#" data-toggle="collapse" data-target="#collapseTwo"
                aria-expanded="true" aria-controls="collapseTwo">
                <i class="fas fa-fw fa-dollar-sign"></i>
                <span>Penjualan</span>
            </a>
            <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionSidebar">
                <div class="bg-white py-2 collapse-inner rounded">
                    <h6 class="collapse-header">Create:</h6>
                    <a class="collapse-item" href="blank.html">Faktur Penjualan</a>
                    <a class="collapse-item" href="blank 2.html">Retur Penjualan</a>
                    <a class="collapse-item" href="#">Surat Jalan Penjualan</a>
                </div>
            </div>
        </li>

Hi guys i just want to ask, I have this side menu, each item with sub-items, that when clicked go to another page. When I press the sub-item Faktur penjualan and I load another page, the menu collapses like in the first photo.

Is there any way to keep the menu open when navigating to other pages? This below is my HTML code. I've tried options from similar questions here but no luck. I'm fairly new to front-end development.