How to show/hide a sidebar based on screen size and push a button?

Question

I built a custom sidebar for my dashboard. Inside this sidebar, I have some menu items. When my screen is small, I make all menu options disappear, and show you a specific menu option. This specific menu option is used as a button that causes all menu items to appear again.

My sidebar:

When my screen is small, the sidebar looks like this:

To mount the sidebar I use the code below:

<div class="card-body">

<a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>

<div id="menulinks" class="nav nav-pills" >
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
<a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
</div>

</div>

To make the items appear/disappear I use this CSS logic below:

@media screen and (min-width: 992px) {

#shmenulinks {
display: none;
}
#menulinks {
display: block;
}
}

@media screen and (max-width: 991px) {
#shmenulinks {
display: block;
}
#menulinks {
display: none;
}

}

My problem is when the screen is small and the menu collapsed, the button I use to make the menu items appear again does not work.

THE CODEPEN: https://codepen.io/neyelson-alves/pen/ZEGbdJB

What should I do?

Answer 1

Failed to add class .collapse on the menu div:

<div id="menulinks" class="nav nav-pills collapse">

And you don’t have to put display: none in the CSS in this div, as the control of this is in charge of the Bootstrap Collapse itself. Remove the code below the CSS:

#menulinks {
display: none;
}

Testing:

@media screen and (min-width: 992px) {
   #menulinks {
      display: block;
   }

   #shmenulinks {
      display: none;
   }

}

@media screen and (max-width: 991px) {
   #shmenulinks {
      display: block;
   }
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">

<div class="card-body">

   <a id="shmenulinks" class="nav-link" style="border-radius: 0.25rem; cursor: pointer; width: 100%;" data-toggle="collapse" aria-expanded="true" aria-controls="menulinks" data-target="#menulinks"><i class="fa fa-bars" aria-hidden="true"></i> Open/Close menu</a>
   
   <div id="menulinks" class="nav nav-pills collapse">
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-home" aria-hidden="true"></i> Home</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-line-chart" aria-hidden="true"></i> Projects</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-suitcase" aria-hidden="true"></i> Jobs</a>
      <a style="width: 100%;" href="https://codepen.io/" target="blank" class="nav-link "><i class="fa fa-sign-out" aria-hidden="true"></i> Logout</a>
   </div>

</div>

Reference:

• Collapse of Bootstrap 4