collapse list items after link click Options

[dualshock]

how can i create a link with anchor to a collapse button? I tried using href="page.html/#collapsediv" but not working.

I have a list-group items which opens a page in an iframe and at the same, collapses that lists to slide the iframe up. Here's the script:

CODE

<div class="container-fluid">
  <div id="collapsediv" class="collapse in" >
      <div class="p-2 mb-2 bg-success text-white">Contents</div>
  <div class="row">
          <div class="form-group col-sm-3"><p><h4>Operations Manual</h4></p>
              <ul class="list-group border-0">
                     <li class="list-group-item border-0">
                          <a href="opd/om/OPU - Section 0.2 Table of Contents1.html" class="text-decoration-none" target="targetframe"><i class="fas fa-book-reader"></i><span>   Table of Contents</span></a>
                     </li>
                     <li class="list-group-item border-0">
                          <a href="qmu/rev-sum.html"  class="text-decoration-none" target="targetframe"><i class="fas fa-book-reader"></i><span>   Revision Summary</span></a>
                     </li>
             </ul>
          </div>
      </div>  
  </div>




  <div class="row">
       <ul>
          <li class="list-group-item border-0"><a class="btn btn-success" data-toggle="collapse" href="#collapsediv" role="button" aria-expanded="false" aria-controls="collapsediv" class="text-decoration-none">
          Collapse
          </a>
          <button class="btn btn-dark" type="button">Full</button>
          <button class="btn btn-secondary hBack" type="button">Back</button>
  </li></ul></div>
          <div class="page-content"><hr>
          <div id="mycontainer">
                <iframe src="" height=90% width=100%  name="targetframe" allowTransparency="true" scrolling="yes" frameborder="0"></iframe>
          </div>
          </div>
  
</div>

[Christian J]

I had to use javascript for this. I also added a toggle button, so the user can get back the menu after it's removed.

CSS:

CODE

ul.show {display: block;}
ul.hide {display: none;}

Javascript and HTML:

CODE

<script type="text/javascript">
window.addEventListener('DOMContentLoaded', function()
{
    var ul=document.getElementById('ul');
    var a=ul.getElementsByTagName('a');
    for(var i=0; i<a.length; i++)
    {
        a[i].onclick=function()
        {
            ul.className='hide';
        }
    }

    var button=document.getElementById('button');
    button.onclick=function()
    {
        if(ul.className=='hide')
        {
            ul.className='show';
        }
        else
        {
            ul.className='hide';
        }
    }
}, false);
</script>

<input type="button" id="button" value="Toggle menu">

<ul id="ul" class="show">
<li><a href="foo.html" target="i">foo</a></li>
<li><a href="bar.html" target="i">bar</a></li>
<li><a href="baz.html" target="i">baz</a></li>
</ul>

<hr>

<iframe id="i" name="i" src=""></iframe>