We Keep Coding

How to let an A href link in the menu bar when clicked, it opens a closed accordion in the body? - html

how the first accordion could be opened when clicked on the a href named "open 1st accordion" and the same thing for the second a href?? The accordion itself works 100% right, I just want to access it from outside it's scope, when clickng on an a href button in the menu bar.
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if(!$(this).next().is(":visible")){
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
Open 1st accordion <br>
Open 2nd accordion
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>
Services.html (every a href in this menu should link to accordions in index.html and open them)
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item" >
<a class="nav-link" href="about.html">Who We Are
</a>
</li>
<li class="nav-item">
<a class="accord" href="">Our Services</a>
</li>
<li class="nav-item" id="nav">
<img src="assets/images/name.png"/>
</li>
<li class="nav-item">
<a class="accord" href="">Our Clients</a>
</li>
<li class="nav-item">
<a class="accord" href="" >Contact Us</a>
</li>
</ul>
</div>

Add a class to the top tags a:
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
Next, using the each() method and the index parameter, write the logic of the click event on these a tags.
Use event.preventDefault() to disable the default behavior of the a tag.
And using the trigger() method, call click events on the .expand class using an eq() with the appropriate index:
$(".expand").eq(index).trigger('click');
As such, we get the following code. Just add it to your main code.
$('.accord').each(function(index) {
$(this).click(function(event) {
event.preventDefault();
$(".expand").eq(index).trigger('click');
});
});
EDIT:
Modified the jquery code taking into account the localStorage().
$(document).ready(function () {
$(".expand").on("click", function () {
$(".right-arrow").text("+");
$(".detail:visible").slideUp();
if (!$(this).next().is(":visible")) {
$(this).next().slideDown(200);
$(this).find(".right-arrow").text("-");
}
});
let click_state = localStorage.getItem("click_state");
let ind = localStorage.getItem("ind");
if (click_state == 1) {
$(".expand").eq(ind).trigger("click");
localStorage.removeItem("click_state");
localStorage.removeItem("ind");
} else {
}
$(".accord").each(function (index) {
$(this).click(function (event) {
event.preventDefault();
localStorage.setItem("click_state", 1);
localStorage.setItem("ind", index);
});
});
});
/*Tips & Tricks Page*/
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#trickslist {
font-family: 'Open Sans', sans-serif;
width: 80%;
margin: 0 auto;
display: table;
}
#trickslist ul {
padding: 0;
margin: 20px 0;
color: #555;
}
#trickslist ul > li {
list-style: none;
border-top: 1px solid #ddd;
display: block;
padding: 15px;
overflow: hidden;
text-align: center;
}
#trickslist ul:last-child {
border-bottom: 1px solid #ddd;
}
#trickslist ul > li:hover {
background: #efefef;
}
.expand {
display: block;
text-decoration: none;
color: #555;
cursor: pointer;
}
.tipstricks {
padding: 5px;
margin: 0;
font-size: 17px;
font-weight: 400;
}
span {
font-size: 12.5px;
}
#left,#right{
display: table;
}
.detail a {
text-decoration: none;
color: #C0392B;
border: 1px solid #C0392B;
padding: 6px 10px 5px;
font-size: 14px;
}
.detail {
margin: 10px 0 10px 0px;
display: none;
line-height: 22px;
height: 150px;
}
.detail span{
margin: 0;
}
.right-arrow {
padding-top: 0px;
margin-top: 0px;
margin-left: 20px;
width: 10px;
height: 100%;
float: right;
font-weight: bold;
font-size: 20px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<a class="accord" href=""> Open 1st accordion </a> <br>
<a class="accord" href=""> Open 2nd accordion </a>
<div class="container">
<div class="row" id="accordion1">
<div id="trickslist">
<ul>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<div>
<h2 class="tipstricks">Exploring your Motivations to Quit Tobacco</h2>
</div>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">What to expect over time.</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Getting Ready: Strategies to conquer urges & set a quit date</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Quitting tobacco with medications</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Dealing with depression or stress</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Avoiding weight gain or alcohol</h2>
</a>
<div class="detail">
</div>
</li>
<li>
<a class="expand" data-parent="#accordion1">
<div class="right-arrow">+</div>
<h2 class="tipstricks">Making your plan stick: relapse prevention</h2>
</a>
<div class="detail">
</div>
</li>
</ul>
</div>
</div>
</div>

Why my Js is not working in my react page?

I'm trying to implement this https://codepen.io/azouaoui-med/pen/wpBadb as one of my pages inside my react proj. But dropdown doesn't work and couldn't able to close side bar which functions by js. AM not getting any error. But it simply being a static page. How to make it to work? Anybody out there help me to resolve this is issue. Thanks in advance
PS: Am getting the same output as from codepen, not the one which shows down when clicking "Run code snippet"
My output is something like this from my proj and also from code sandbox
My codesandbox for reference : https://5vbl2.csb.app/
Side bar which i tried using with dropdown
$(".sidebar-dropdown > a").click(function() {
$(".sidebar-submenu").slideUp(200);
if (
$(this)
.parent()
.hasClass("active")
) {
$(".sidebar-dropdown").removeClass("active");
$(this)
.parent()
.removeClass("active");
} else {
$(".sidebar-dropdown").removeClass("active");
$(this)
.next(".sidebar-submenu")
.slideDown(200);
$(this)
.parent()
.addClass("active");
}
});
$("#close-sidebar").click(function() {
$(".page-wrapper").removeClass("toggled");
});
$("#show-sidebar").click(function() {
$(".page-wrapper").addClass("toggled");
});
#keyframes swing {
0% {
transform: rotate(0deg);
}
10% {
transform: rotate(10deg);
}
30% {
transform: rotate(0deg);
}
40% {
transform: rotate(-10deg);
}
50% {
transform: rotate(0deg);
}
60% {
transform: rotate(5deg);
}
70% {
transform: rotate(0deg);
}
80% {
transform: rotate(-5deg);
}
100% {
transform: rotate(0deg);
}
}
#keyframes sonar {
0% {
transform: scale(0.9);
opacity: 1;
}
100% {
transform: scale(2);
opacity: 0;
}
}
body {
font-size: 0.9rem;
}
.page-wrapper .sidebar-wrapper,
.sidebar-wrapper .sidebar-brand > a,
.sidebar-wrapper .sidebar-dropdown > a:after,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before,
.sidebar-wrapper ul li a i,
.page-wrapper .page-content,
.sidebar-wrapper .sidebar-search input.search-menu,
.sidebar-wrapper .sidebar-search .input-group-text,
.sidebar-wrapper .sidebar-menu ul li a,
#show-sidebar,
#close-sidebar {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
}
/*----------------page-wrapper----------------*/
.page-wrapper {
height: 100vh;
}
.page-wrapper .theme {
width: 40px;
height: 40px;
display: inline-block;
border-radius: 4px;
margin: 2px;
}
.page-wrapper .theme.chiller-theme {
background: #1e2229;
}
/*----------------toggeled sidebar----------------*/
.page-wrapper.toggled .sidebar-wrapper {
left: 0px;
}
#media screen and (min-width: 768px) {
.page-wrapper.toggled .page-content {
padding-left: 300px;
}
}
/*----------------show sidebar button----------------*/
#show-sidebar {
position: fixed;
left: 0;
top: 10px;
border-radius: 0 4px 4px 0px;
width: 35px;
transition-delay: 0.3s;
}
.page-wrapper.toggled #show-sidebar {
left: -40px;
}
/*----------------sidebar-wrapper----------------*/
.sidebar-wrapper {
width: 260px;
height: 100%;
max-height: 100%;
position: fixed;
top: 0;
left: -300px;
z-index: 999;
}
.sidebar-wrapper ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.sidebar-wrapper a {
text-decoration: none;
}
/*----------------sidebar-content----------------*/
.sidebar-content {
max-height: calc(100% - 30px);
height: calc(100% - 30px);
overflow-y: auto;
position: relative;
}
.sidebar-content.desktop {
overflow-y: hidden;
}
/*--------------------sidebar-brand----------------------*/
.sidebar-wrapper .sidebar-brand {
padding: 10px 20px;
display: flex;
align-items: center;
}
.sidebar-wrapper .sidebar-brand > a {
text-transform: uppercase;
font-weight: bold;
flex-grow: 1;
}
.sidebar-wrapper .sidebar-brand #close-sidebar {
cursor: pointer;
font-size: 20px;
}
/*--------------------sidebar-header----------------------*/
.sidebar-wrapper .sidebar-header {
padding: 20px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic {
float: left;
width: 60px;
padding: 2px;
border-radius: 12px;
margin-right: 15px;
overflow: hidden;
}
.sidebar-wrapper .sidebar-header .user-pic img {
object-fit: cover;
height: 100%;
width: 100%;
}
.sidebar-wrapper .sidebar-header .user-info {
float: left;
}
.sidebar-wrapper .sidebar-header .user-info > span {
display: block;
}
.sidebar-wrapper .sidebar-header .user-info .user-role {
font-size: 12px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status {
font-size: 11px;
margin-top: 4px;
}
.sidebar-wrapper .sidebar-header .user-info .user-status i {
font-size: 8px;
margin-right: 4px;
color: #5cb85c;
}
/*-----------------------sidebar-search------------------------*/
.sidebar-wrapper .sidebar-search > div {
padding: 10px 20px;
}
/*----------------------sidebar-menu-------------------------*/
.sidebar-wrapper .sidebar-menu {
padding-bottom: 10px;
}
.sidebar-wrapper .sidebar-menu .header-menu span {
font-weight: bold;
font-size: 14px;
padding: 15px 20px 5px 20px;
display: inline-block;
}
.sidebar-wrapper .sidebar-menu ul li a {
display: inline-block;
width: 100%;
text-decoration: none;
position: relative;
padding: 8px 30px 8px 20px;
}
.sidebar-wrapper .sidebar-menu ul li a i {
margin-right: 10px;
font-size: 12px;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
border-radius: 4px;
}
.sidebar-wrapper .sidebar-menu ul li a:hover > i::before {
display: inline-block;
animation: swing ease-in-out 0.5s 1 alternate;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown > a:after {
font-family: "Font Awesome 5 Free";
font-weight: 900;
content: "\f105";
font-style: normal;
display: inline-block;
font-style: normal;
font-variant: normal;
text-rendering: auto;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
background: 0 0;
position: absolute;
right: 15px;
top: 14px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu ul {
padding: 5px 0;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li {
padding-left: 25px;
font-size: 13px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a:before {
content: "\f111";
font-family: "Font Awesome 5 Free";
font-weight: 400;
font-style: normal;
display: inline-block;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin-right: 10px;
font-size: 8px;
}
.sidebar-wrapper .sidebar-menu ul li a span.label,
.sidebar-wrapper .sidebar-menu ul li a span.badge {
float: right;
margin-top: 8px;
margin-left: 5px;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .badge,
.sidebar-wrapper .sidebar-menu .sidebar-dropdown .sidebar-submenu li a .label {
float: right;
margin-top: 0px;
}
.sidebar-wrapper .sidebar-menu .sidebar-submenu {
display: none;
}
.sidebar-wrapper .sidebar-menu .sidebar-dropdown.active > a:after {
transform: rotate(90deg);
right: 17px;
}
/*--------------------------side-footer------------------------------*/
.sidebar-footer {
position: absolute;
width: 100%;
bottom: 0;
display: flex;
}
.sidebar-footer > a {
flex-grow: 1;
text-align: center;
height: 30px;
line-height: 30px;
position: relative;
}
.sidebar-footer > a .notification {
position: absolute;
top: 0;
}
.badge-sonar {
display: inline-block;
background: #980303;
border-radius: 50%;
height: 8px;
width: 8px;
position: absolute;
top: 0;
}
.badge-sonar:after {
content: "";
position: absolute;
top: 0;
left: 0;
border: 2px solid #980303;
opacity: 0;
border-radius: 50%;
width: 100%;
height: 100%;
animation: sonar 1.5s infinite;
}
/*--------------------------page-content-----------------------------*/
.page-wrapper .page-content {
display: inline-block;
width: 100%;
padding-left: 0px;
padding-top: 20px;
}
.page-wrapper .page-content > div {
padding: 20px 40px;
}
.page-wrapper .page-content {
overflow-x: hidden;
}
/*------scroll bar---------------------*/
::-webkit-scrollbar {
width: 5px;
height: 7px;
}
::-webkit-scrollbar-button {
width: 0px;
height: 0px;
}
::-webkit-scrollbar-thumb {
background: #525965;
border: 0px none #ffffff;
border-radius: 0px;
}
::-webkit-scrollbar-thumb:hover {
background: #525965;
}
::-webkit-scrollbar-thumb:active {
background: #525965;
}
::-webkit-scrollbar-track {
background: transparent;
border: 0px none #ffffff;
border-radius: 50px;
}
::-webkit-scrollbar-track:hover {
background: transparent;
}
::-webkit-scrollbar-track:active {
background: transparent;
}
::-webkit-scrollbar-corner {
background: transparent;
}
/*-----------------------------chiller-theme-------------------------------------------------*/
.chiller-theme .sidebar-wrapper {
background: #31353D;
}
.chiller-theme .sidebar-wrapper .sidebar-header,
.chiller-theme .sidebar-wrapper .sidebar-search,
.chiller-theme .sidebar-wrapper .sidebar-menu {
border-top: 1px solid #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
border-color: transparent;
box-shadow: none;
}
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-role,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info .user-status,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text,
.chiller-theme .sidebar-wrapper .sidebar-brand>a,
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a,
.chiller-theme .sidebar-footer>a {
color: #818896;
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li:hover>a,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active>a,
.chiller-theme .sidebar-wrapper .sidebar-header .user-info,
.chiller-theme .sidebar-wrapper .sidebar-brand>a:hover,
.chiller-theme .sidebar-footer>a:hover i {
color: #b8bfce;
}
.page-wrapper.chiller-theme.toggled #close-sidebar {
color: #bdbdbd;
}
.page-wrapper.chiller-theme.toggled #close-sidebar:hover {
color: #ffffff;
}
.chiller-theme .sidebar-wrapper ul li:hover a i,
.chiller-theme .sidebar-wrapper .sidebar-dropdown .sidebar-submenu li a:hover:before,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu:focus+span,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown.active a i {
color: #16c7ff;
text-shadow:0px 0px 10px rgba(22, 199, 255, 0.5);
}
.chiller-theme .sidebar-wrapper .sidebar-menu ul li a i,
.chiller-theme .sidebar-wrapper .sidebar-menu .sidebar-dropdown div,
.chiller-theme .sidebar-wrapper .sidebar-search input.search-menu,
.chiller-theme .sidebar-wrapper .sidebar-search .input-group-text {
background: #3a3f48;
}
.chiller-theme .sidebar-wrapper .sidebar-menu .header-menu span {
color: #6c7b88;
}
.chiller-theme .sidebar-footer {
background: #3a3f48;
box-shadow: 0px -1px 5px #282c33;
border-top: 1px solid #464a52;
}
.chiller-theme .sidebar-footer>a:first-child {
border-left: none;
}
.chiller-theme .sidebar-footer>a:last-child {
border-right: none;
}
<div class="page-wrapper chiller-theme toggled">
<a id="show-sidebar" class="btn btn-sm btn-dark" href="#">
<i class="fas fa-bars"></i>
</a>
<nav id="sidebar" class="sidebar-wrapper">
<div class="sidebar-content">
<div class="sidebar-brand">
pro sidebar
<div id="close-sidebar">
<i class="fas fa-times"></i>
</div>
</div>
<div class="sidebar-header">
<div class="user-pic">
<img class="img-responsive img-rounded" src="https://raw.githubusercontent.com/azouaoui-med/pro-sidebar-template/gh-pages/src/img/user.jpg" alt="User picture">
</div>
<div class="user-info">
<span class="user-name">Jhon
<strong>Smith</strong>
</span>
<span class="user-role">Administrator</span>
<span class="user-status">
<i class="fa fa-circle"></i>
<span>Online</span>
</span>
</div>
</div>
<!-- sidebar-header -->
<div class="sidebar-search">
<div>
<div class="input-group">
<input type="text" class="form-control search-menu" placeholder="Search...">
<div class="input-group-append">
<span class="input-group-text">
<i class="fa fa-search" aria-hidden="true"></i>
</span>
</div>
</div>
</div>
</div>
<!-- sidebar-search -->
<div class="sidebar-menu">
<ul>
<li class="header-menu">
<span>General</span>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-tachometer-alt"></i>
<span>Dashboard</span>
<span class="badge badge-pill badge-warning">New</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Dashboard 1
<span class="badge badge-pill badge-success">Pro</span>
</a>
</li>
<li>
Dashboard 2
</li>
<li>
Dashboard 3
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-shopping-cart"></i>
<span>E-commerce</span>
<span class="badge badge-pill badge-danger">3</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
<a href="#">Products
</a>
</li>
<li>
Orders
</li>
<li>
Credit cart
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="far fa-gem"></i>
<span>Components</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
General
</li>
<li>
Panels
</li>
<li>
Tables
</li>
<li>
Icons
</li>
<li>
Forms
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-chart-line"></i>
<span>Charts</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Pie chart
</li>
<li>
Line chart
</li>
<li>
Bar chart
</li>
<li>
Histogram
</li>
</ul>
</div>
</li>
<li class="sidebar-dropdown">
<a href="#">
<i class="fa fa-globe"></i>
<span>Maps</span>
</a>
<div class="sidebar-submenu">
<ul>
<li>
Google maps
</li>
<li>
Open street map
</li>
</ul>
</div>
</li>
<li class="header-menu">
<span>Extra</span>
</li>
<li>
<a href="#">
<i class="fa fa-book"></i>
<span>Documentation</span>
<span class="badge badge-pill badge-primary">Beta</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-calendar"></i>
<span>Calendar</span>
</a>
</li>
<li>
<a href="#">
<i class="fa fa-folder"></i>
<span>Examples</span>
</a>
</li>
</ul>
</div>
<!-- sidebar-menu -->
</div>
<!-- sidebar-content -->
<div class="sidebar-footer">
<a href="#">
<i class="fa fa-bell"></i>
<span class="badge badge-pill badge-warning notification">3</span>
</a>
<a href="#">
<i class="fa fa-envelope"></i>
<span class="badge badge-pill badge-success notification">7</span>
</a>
<a href="#">
<i class="fa fa-cog"></i>
<span class="badge-sonar"></span>
</a>
<a href="#">
<i class="fa fa-power-off"></i>
</a>
</div>
</nav>
<!-- sidebar-wrapper -->
<main class="page-content">
<div class="container">
<h2>Pro Sidebar</h2>
<hr>
<div class="row">
<div class="form-group col-md-12">
<p>This is a responsive sidebar template with dropdown menu based on bootstrap 4 framework.</p>
<p> You can find the complete code on <a href="https://github.com/azouaoui-med/pro-sidebar-template" target="_blank">
Github</a>, it contains more themes and background image option</p>
</div>
<div class="form-group col-md-12">
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=star&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
<iframe src="https://ghbtns.com/github-btn.html?user=azouaoui-med&repo=pro-sidebar-template&type=fork&count=true&size=small" frameborder="0" scrolling="0" width="90px" height="30px"></iframe>
</div>
<div class="form-group col-md-12">
<div class="alert alert-success" role="alert">
<h4 class="alert-heading">New !</h4>
<p>New react pro sidebar library is now available on npm <a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/react-pro-sidebar?style=social" />
</a></p>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank" class="btn btn-sm btn-primary mr-2">
Github</a>
<a href="https://azouaoui-med.github.io/react-pro-sidebar" target="_blank" class="btn btn-sm btn-success">
Demo</a>
</div>
</div>
</div>
<h5>More templates</h5>
<hr>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369568-a49b2480-7efc-11e9-9ca9-2be44afacda1.png" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Pro Sidebar</h6>
Github
Demo
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/angular-pro-sidebar?style=social" />
</a>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-6 col-md-6 col-lg-6">
<div class="card rounded-0 p-0 shadow-sm">
<img src="https://user-images.githubusercontent.com/25878302/58369258-33f20900-7ef8-11e9-8ff3-b277cb7ed7b4.PNG" class="card-img-top rounded-0" alt="Angular pro sidebar">
<div class="card-body text-center">
<h6 class="card-title">Angular Dashboard</h6>
Github
Demo
<hr>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/stars/azouaoui-med/lightning-admin-angular?style=social" />
</a>
<a href="https://github.com/azouaoui-med/react-pro-sidebar" target="_blank">
<img alt="GitHub stars" src="https://img.shields.io/github/forks/azouaoui-med/lightning-admin-angular?style=social" />
</a>
</div>
</div>
</div>
</div>
<hr>
<footer class="text-center">
<div class="mb-2">
<small>
© 2020 made with <i class="fa fa-heart" style="color:red"></i> by - <a target="_blank" rel="noopener noreferrer" href="https://azouaoui.netlify.com">
Mohamed Azouaoui
</a>
</small>
</div>
<div>
<a href="https://github.com/azouaoui-med" target="_blank">
<img alt="GitHub followers" src="https://img.shields.io/github/followers/azouaoui-med?label=github&style=social" />
</a>
<a href="https://twitter.com/azouaoui_med" target="_blank">
<img alt="Twitter Follow" src="https://img.shields.io/twitter/follow/azouaoui_med?label=twitter&style=social" />
</a>
</div>
</footer>
</div>
</main>
<!-- page-content" -->
</div>
<!-- page-wrapper -->
This is the javascript which am uisng

This is how it looks like for me, i can deal with icons but for functionality am helpless.

Adding this here rather than a comment, so that I can show the picture ...
When I go to:
https://codesandbox.io/s/5vbl2?file=/src/App.js:200-335
This is what I see:
The highlighted code just after the start of the Secdoc function is the only bit of jQuery code I can find (and doesn't match what you had in your question); the panel at the bottom left shows the console erros that I keep mentioning.

I want the side bar display first and collapse after clicking the button and adding the dropdown to the side of the menu items using bootstrap

I want the side bar menu using bootstrap.
I want to hide the menu even in the large screen by clicking the button.
When collpasing to the left side menu icons should display on the left side.
Inside the menu item by clicking it dropdown to the side.
Please tell me the solution.
I tried using the css and bootstrap and jquery. It is not working.
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar"
aria-expanded="false" aria-controls="navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-brand">
<a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div>
<!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li>
<a href="#anch2">
<span class="fa fa-anchor solo">Anchor 2</span>
</a>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

I added some jquery code and chaged this block of your code. rest of the code is same.
Also don't forget to add jquery, font-awesome, and bootstrap cdn in your code. (as included in the snippet below)
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
$(document).ready(function () {
$("a#menu-toggle").click(function (){
$("#wrapper").toggleClass("active");
});
});
#wrapper {
padding-left: 250px;
transition: all 0.4s ease 0s;
}
#sidebar-wrapper {
margin-left: -250px;
top: 51px;
left: 250px;
width: 250px;
background: #000;
position: fixed;
height: 100%;
overflow-y: auto;
z-index: 1000;
transition: all 0.4s ease 0s;
}
#wrapper.active {
padding-left: 0;
}
#wrapper.active #sidebar-wrapper {
left: 0;
}
#page-content-wrapper {
width: 100%;
padding-top: 70px;
transition: all 0.4s ease 0s;
}
.sidebar-nav {
position: absolute;
top: 0;
width: 250px;
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-nav li {
line-height: 40px;
text-indent: 20px;
}
.sidebar-nav li a {
color: #999999;
display: block;
text-decoration: none;
padding-left: 60px;
}
.sidebar-nav li a span:before {
position: absolute;
left: 0;
color: #41484c;
text-align: center;
width: 20px;
line-height: 18px;
}
.sidebar-nav li a:hover,
.sidebar-nav li.active {
color: #fff;
background: rgba(255,255,255,0.2);
text-decoration: none;
}
.sidebar-nav li a:active,
.sidebar-nav li a:focus {
text-decoration: none;
}
.sidebar-nav > .sidebar-brand {
height: 65px;
line-height: 60px;
font-size: 18px;
}
.sidebar-nav > .sidebar-brand a {
color: #999999;
}
.sidebar-nav > .sidebar-brand a:hover {
color: #fff;
background: none;
}
#menu-toggle {
text-decoration: none;
float: left;
color: #fff;
padding-right: 15px;
}
#media (max-width:767px) {
#wrapper {
padding-left: 0;
}
#sidebar-wrapper {
left: 0;
}
#wrapper.active {
position: relative;
left: 250px;
}
#wrapper.active #sidebar-wrapper {
left: 250px;
width: 250px;
transition: all 0.4s ease 0s;
}
#menu-toggle {
display: inline-block;
}
}
.dropdown,.sidebar-nav,#id,#sidebar-wrapper{
overflow:visible;
}
.dropdown>.dropdown-menu{
position:absolute;
top:0;
left:100%;
z-index:100;
background-color:black;
margin:0;
padding:0;
border:none;
border-radius:0;
}
.dropdown>.dropdown-menu>li>a{
line-height:45px;
color:white;
background-color:black;
}
.dropdown>.dropdown-menu>li>a:hover{
background: rgba(255,255,255,0.2);
color:white;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="wrapper">
<nav class="navbar navbar-inverse navbar-fixed-top" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<div class="navbar-brand">
<a id="menu-toggle" href="#" class=" btn-menu toggle">
<i class="fa fa-bars"></i>
</a>
Project name
</div>
</div>
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav">
<li class="active">Home</li>
<li>About</li>
</ul>
</div><!--/.nav-collapse -->
</div>
</nav>
<!-- Sidebar -->
<div id="sidebar-wrapper">
<nav id="spy">
<ul class="sidebar-nav nav">
<li class="sidebar-brand">
<span class="fa fa-home solo">Home</span>
</li>
<li>
<a href="#anch1">
<span class="fa fa-anchor solo">Anchor 1</span>
</a>
</li>
<li class="dropdown">
<span class="fa fa-anchor solo">Anchor 2</span><span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
</ul>
</li>
<li>
<a href="#anch3">
<span class="fa fa-anchor solo">Anchor 3</span>
</a>
</li>
<li>
<a href="#anch4">
<span class="fa fa-anchor solo">Anchor 4</span>
</a>
</li>
</ul>
</nav>
</div>
<!-- Page content -->
<div id="page-content-wrapper">
<div class="page-content">
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="panel panel-danger">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
<div class="col-md-6">
<div class="panel panel-success">
<div class="panel-heading">
Panel 1
</div>
<div class="panel-body">
content body
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

FadeOut pseudo element

I have a home page with images and .png texture which is a pseudo element over each image. I would need this .png texture to FadeOut on hover. Having it configured in the way it is, how may I implement the feature? Or would it be easier to make it by changing the current set up?
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*HEADER*/
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding: 70px 0 70px 0;
}
#media (min-width: 1200px) {
.container{
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
}
.top-buffer {
margin-top: 25px;
}
/*IMG OVERLAY*/
.img-container a {
display: block;
position: relative;
}
.img-container a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: url('http://feanor.cz/public/img/web/img-cover.png');
}
/*.img-container a:hover:before {
display: none;
}*/
/*DROPDOWN*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #161616;
}
/*IMAGES*/
.masonry-container {
padding: 0;
}
.item {
padding: 3px;
}
.item img {
max-width: 100%;
}
/*CONTACTS*/
.contact_photo img {
max-width: 100%;
}
.contact {
color: #aaa;
}
.contact a {
color: #aaa;
}
.contact a:hover {
color: #fff;
}
.contact img {
margin-top: 3px;
margin-bottom: 10px;
}
.contact p {
font-size: 12pt;
}
/*FOOTER*/
#footer-bottom {
min-height: 30px;
line-height: 30px;
width: 100%;
color: #777;
}
#footer-bottom > li > i {
margin-left: -5px;
}
.copyright {
padding-top: 15px;
}
#email_footer {
padding-top: 15px;
}
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i>
</a>
</li>
<li>
<p>lybvit#gmail.com</p>
</li>
</ul>
</div>
</div>
</body>

use the hover pseudo selector and target the :before pseudoselector use opacity to toggle between the states and transition to animate it
.img-container:hover a:before {
content: "";
opacity:0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
#import url('http://getbootstrap.com/dist/css/bootstrap.css');
/*HEADER*/
#logo {
margin-top: 12px;
}
/*BODY*/
body {
background-color: #262626;
padding: 70px 0 70px 0;
}
#media (min-width: 1200px) {
.container{
max-width: 1080px;
}
}
.row > div > a > img {
width: 100%;
display: block;
}
.top-buffer {
margin-top: 25px;
}
/*IMG OVERLAY*/
.img-container a {
display: block;
position: relative;
}
.img-container a:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
opacity:1;
background: url('http://feanor.cz/public/img/web/img-cover.png');
}
.img-container:hover a:before {
content: "";
opacity:0;
-webkit-transition: all 1s; /* Safari */
transition: all 1s;
}
/*.img-container a:hover:before {
display: none;
}*/
/*DROPDOWN*/
ul.nav li.dropdown:hover > ul.dropdown-menu {
display: block;
background-color: #1e1e1e;
}
.navbar-nav > li > .dropdown-menu > li > a {
color: #aaa;
}
.navbar-nav > li > .dropdown-menu > li > a:hover {
color: #fff;
background-color: #161616;
}
/*IMAGES*/
.masonry-container {
padding: 0;
}
.item {
padding: 3px;
}
.item img {
max-width: 100%;
}
/*CONTACTS*/
.contact_photo img {
max-width: 100%;
}
.contact {
color: #aaa;
}
.contact a {
color: #aaa;
}
.contact a:hover {
color: #fff;
}
.contact img {
margin-top: 3px;
margin-bottom: 10px;
}
.contact p {
font-size: 12pt;
}
/*FOOTER*/
#footer-bottom {
min-height: 30px;
line-height: 30px;
width: 100%;
color: #777;
}
#footer-bottom > li > i {
margin-left: -5px;
}
.copyright {
padding-top: 15px;
}
#email_footer {
padding-top: 15px;
}
<body>
<nav class="navbar navbar-inverse navbar-fixed-top container-fluid">
<div class="container">
<a href="http://feanor.cz/">
<img class="navbar-left" id="logo" src="http://feanor.cz/public/img/web/logo_studio.gif" width="200" alt="Feanor Studio">
</a>
<ul class="nav navbar-nav navbar-right">
<li>
Home
</li>
<li>
Contact
</li>
</ul>
</div>
</nav>
<div class="container">
<div class="row">
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/painting/oil/8t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/portrait/32t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/wedding/26t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/car/5t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/product/10t.jpg">
</a>
</div>
<div class="col-sx-6 col-sm-6 col-md-4 col-lg-4 top-buffer img-container">
<a href="#">
<img src="http://feanor.cz/public/img/photo/interior/4t.jpg">
</a>
</div>
</div>
<div class="footer-bottom navbar-inverse navbar-fixed-bottom container-fluid">
<div class="container">
<div class="copyright navbar-left">
© 2016, Feanor, All rights reserved
</div>
<ul class="nav navbar-nav navbar-right navbar-right">
<li>
<a target="_blank" href="#">
<i class="fa fa-instagram fa-2x faicon"></i>
</a>
</li>
<li>
<a target="_blank" href="#">
<i class="fa fa-envelope fa-2x faicon"></i>
</a>
</li>
<li>
<p>lybvit#gmail.com</p>
</li>
</ul>
</div>
</div>
</body>

Use :hover psuedo class and transitions to fade out the image:
.img-container:hover a:before {
opacity: 0;
transition: opacity 1s ease;
}
This will fade from default opacity: 1; to 0 over one second with an easing animation effect.

fix show hide panle in scroll page

I design show/hide panel using bootstrap like this:
HTML:
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
.content {
height: 1000px;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sidebar-nav {
margin-left: -250px;
width: 250px;
z-index: 10001;
position: absolute;
left: 0px;
top: 0px;
overflow: hidden;
height: 100vh;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
background-color: #fafafa;
border-right: 1px solid #ccc;
}
.sidebar-nav-togled {
margin-left: 0px;
}
.sideBarCloseIcon {
float: right;
cursor: pointer;
}
.backdrop {
height: 100vh;
width: 100%;
z-index: 10000;
position: fixed;
top: 0;
left: 0;
display: none;
background-color: #000;
opacity: 0.2;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
.sidebar-nav .list-group-item {
background-color: transparent;
border: 0px;
cursor: pointer;
}
.sidebar-nav .list-group {
margin-left: -15px;
margin-right: -15px;
}
.sidebar-nav .list-group hr {
margin-top: 0px;
margin-bottom: 0px;
}
.list-group-item-icon {
padding-right: 5px;
}
#hamburgerMenu {
cursor: pointer;
}
.list-group-item.active,
.list-group-item.active:focus,
.list-group-item.active:hover {
background-color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navbar navbar-default" role="navigation" style="margin-bottom: -20px">
<div class="container-fluid">
<div class="navbar-header">
<a id="hamburgerMenu" class="navbar-brand"><span
class="glyphicon glyphicon-menu-hamburger" aria-hidden="true"></span></a>
<a class="navbar-brand">Slide Panel</a>
</div>
</div>
<!--/.container-fluid -->
</div>
<div class="backdrop"></div>
<div id="mySideBar" class="sidebar-nav container-fluid" aria-label="...">
<div class="row">
<div class="col-xs-12" style="padding: 5px 15px 1px 15px">
<h4 style="padding-left: 0px; font-size: 19px; color: #666">
WorkPanel <span
class="sideBarCloseIcon glyphicon glyphicon-remove"
aria-hidden="true"></span>
</h4>
</div>
</div>
<hr style="margin: 5px -15px" />
<ul class="list-group">
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-home" aria-hidden="true"></span>Home</li>
<li class="list-group-item"><span class="list-group-item-icon glyphicon glyphicon-user" aria-hidden="true"></span>My Profile
</li>
<li class="list-group-item"><span class="badge">2</span>
<i class="fa fa-newspaper-o list-group-item-icon"></i>News</li>
<hr />
<li class="list-group-item">
<i class="fa fa-question list-group-item-icon"></i>
<span class="badge">2</span> Forum</li>
<li class="list-group-item">
<i class="fa fa-users list-group-item-icon"></i>
<span class="badge">2</span> Teams</li>
</ul>
<hr style="margin: 5px -15px" />
<form class="form-inline">
<div class="form-group" style="width: 181px">
<label for="exampleInputName2">Search Here</label>
<input type="text" class="form-control" id="exampleInputName2" style="width: 100%" placeholder="Enter Text Here">
</div>
<button style="margin-top: 24px; padding: 9px;" type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
</button>
</form>
<hr style="margin: 5px -15px" />
<div>
<strong>Need Help ? Contact Us</strong>
<ul class="list-group">
<li class="list-group-item"><i class="fa fa-envelope list-group-item-icon"></i>Mail</li>
<li class="list-group-item"><i class="fa fa-phone list-group-item-icon"></i>Phone</li>
</ul>
</div>
</div>
<div class="content">
######
</div>
Now In Action work for me But when I Scroll page My Panel in scroll move to top. I need to fix my panel to top in scroll. how do fix This problem?
$(function() {
$("#hamburgerMenu, .backdrop, .sideBarCloseIcon").click(function() {
$("#mySideBar").toggleClass("sidebar-nav-togled");
$(".backdrop").toggle();
});
$(".list-group-item").click(function() {
$(".list-group-item").removeClass("active");
$(this).addClass("active");
});
});
Demo : https://jsfiddle.net/9m7m756a/

You can use fixed positioning just like:
#mySideBar {
position: fixed;
}
Or checkout this Fiddle.
Hope this helps!