Hi I am currently working on a bootstrap project in which I am facing an issue regarding submenu of of one of the main menu link. Basically what bootstrap does is toggles(adds or remove) "show" class from submenu, when main menu link is clicked. And when a link in submenu is clicked it restores main menu to a state where submenu is hidden. What I need is that when any of the link in submenu is clicked or active then it should not hide the submenu. Attaching the chunk of my html and JavaScript code. Any suggestion or help would be appreciated.
let submenu = document.getElementById("collapseExample");
let submenu_link = submenu.querySelectorAll("ul li a");
for (var i = 0; i < submenu_link.length; i++) {
submenu_link[i].addEventListener("click", function() {
submenu.classList.toggle('show')
});
}<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous" />
<link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
<ul>
<li class="active"><a href="./index.html"><span>Dashboard</span></a></li>
<li><a href="#"><span>Send New Artworks</span></a></li>
<li class="active side__nav__submenu" data-bs-toggle="collapse" href="#collapseExample"><a href="#"><span>Artworks</span></a></li>
<div class="collapse" id="collapseExample">
<ul class="list-group">
<li><a href="/abc">No Response</a></li>
<li><a href="/cde">Require Amendments</a></li>
<li><a href="/efg">Customer Approved</a></li>
</ul>
</div>
</ul>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>