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

Question

I built a custom nav sidebar for my panel. Inside this sidebar i have few menu options. When my screen size is small, i want all menu options to dissapear, and show only one especific menu item. This especific menu option is used like a button that you can use to make all itens appear again.

The menu:

When my screen is small it looks like this:

For my sidebar menu i use the code bellow:

<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 menu options appear/disappear i use this CSS logic bellow:

@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 my screen is small and my menu is collapsed, the button that can be used to make the menu options appear/disappear doesn't work.

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

What should i do?

Answer 1

Please Add jquery.

$("#shmenulinks").click(function(){ $("#menulinks").slideToggle();});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Answer 2

There are classes available to use display properties for all the breakpoints. If you want to hide some menus only in Medium devices use the class ** d-lg-block d-md-none d-sm-block** You want to show all the menus in large and medium devices expect in mobile you can use like class=" ** d-lg-block d-md-block d-none d-sm-none** " I have put it for div similarly u give the classes to the element you want to hide only in small screens (Mobile) or Medium Devices(Tablet)

<div class="col-sm-4 d-lg-block d-md-block d-none d-sm-none ">
  <h3>Column 1</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit...</p>
  <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris...</p>
</div>

On button click call a function and do like this

function onBtnClick(){
var element = document.getElementById("Menu1");
element.classList.add("d-lg-block d-md-block d-none d-sm-none");
}