Nsryjdtyk

I have a sidebar menu with many entries and many sublevels, which looks like that :

  <div class="container-fluid">

     <div class="row">

        <div class="col-md-2" id="sidebar" style="margin: 5px 0">

           <div class="list-group panel">

              <a href="/demo" class="list-group-item">Menu</a>

              <a href="#tech" class="list-group-item" data-toggle="collapse"><i class="fa fa-wrench"></i> Menu 1 <i class="fa fa-caret-down"></i></a>

              <div class="collapse" id="tech" data-parent="#sidebar">

                 <a href="#techsub1" class="list-group-item" data-toggle="collapse">Sub 1 <i class="fa fa-caret-down"></i></a>

                 <div class="collapse" id="techsub1" data-parent="#techsub1">

                    <a class="list-group-item" href="techsub1sub1.html">techsub1sub1</a>

                    <a class="list-group-item" href="techsub1sub2.html">techsub1sub2</a>

                 </div>



                 <a href="#techsub2" class="list-group-item" data-toggle="collapse">Sub 2 <i class="fa fa-caret-down"></i></a>

                 <div class="collapse" id="techsub2" data-parent="#techsub2">

                    <a href="#techsub2sub1" class="list-group-item" data-toggle="collapse">Sub 2 <i class="fa fa-caret-down"></i></a>

                    <div class="collapse" id="techsub2sub1" data-parent="#techsub2sub1">

                       <a class="list-group-item" href="techsub2sub1sub1.html">techsub2sub1sub1</a>

                       <a class="list-group-item" href="techsub2sub1sub2.html">techsub2sub1sub2</a>

                    </div>

                 </div>

              </div>



              <a href="#anx" class="list-group-item" data-toggle="collapse" data-parent="#sidebar"><i class="fa fa-book"></i> Menu 2 <i class="fa fa-caret-down"></i></a>

              <div class="collapse" id="anx" data-parent="#sidebar">

                 <a class="list-group-item" href="anx1.html">anx1</a>

                 <a class="list-group-item" href="anx2.html">anx2</a>

              </div>



           </div>

        </div>



        <main class="col-md-10" style="background-color: #fff; max-width: 1140px; padding-top: 30px; padding-bottom: 20px">

           Lorem ipsum dolor sit amet, consectetur adipiscing elit.

        </main>

     </div>

  </div>

It works well but there are so many entries in the menu that I want to use a pager on each page [Previous - Current - Next]

My concern is that when I click on Previous or Next page, the sidebar is collapsed. Is there a way to expand the according page called, but keeping it collapsed on the home page ?

All you need to do is to add a .show CSS class to the collapsed (having .collapse CSS class) block, which you want to be expanded. See https://getbootstrap.com/docs/4.0/components/collapse/

It can be done in two basic ways - hard-coded for each page or added dynamically/programmatically based on some parameter (probably id of desired expanded collapse)

Passing a parameter from one to other page on redirecting is a separate question, but in case you wonder how to do it - try some URL parameters/hash or cookies/local storage