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.

Form Wizard Next Button Not Working

I have a problem with the next button. It seems that the button didn't work. The design is okay and I think it has something to do with the javascript and I don't know where since I am still practice front-end.
I tried to do some changes from the javascript and css for hoping it would work but nothing happen a miracle. Does anyone have any idea why is this happening? The original code is came from this link:
https://bootsnipp.com/snippets/rvPDr
Any help would be appreciated.
$(document).ready(function() {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function(e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function(e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function(e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
.wizard {
margin: 20px auto;
background: #fff;
}
.wizard .nav-tabs {
position: relative;
margin: 40px auto;
margin-bottom: 0;
border-bottom-color: #e0e0e0;
}
.wizard>div.wizard-inner {
position: relative;
}
.connecting-line {
height: 2px;
background: #e0e0e0;
position: absolute;
width: 80%;
margin: 0 auto;
left: 0;
right: 0;
top: 50%;
z-index: 1;
}
.wizard .nav-tabs>li.active>a,
.wizard .nav-tabs>li.active>a:hover,
.wizard .nav-tabs>li.active>a:focus {
color: #555555;
cursor: default;
border: 0;
border-bottom-color: transparent;
}
span.round-tab {
width: 70px;
height: 70px;
line-height: 70px;
display: inline-block;
border-radius: 100px;
background: #fff;
border: 2px solid #e0e0e0;
z-index: 2;
position: absolute;
left: 0;
text-align: center;
font-size: 25px;
}
span.round-tab i {
color: #555555;
}
.wizard li.active span.round-tab {
background: #fff;
border: 2px solid #5bc0de;
}
.wizard li.active span.round-tab i {
color: #5bc0de;
}
span.round-tab:hover {
color: #333;
border: 2px solid #333;
}
.wizard .nav-tabs>li {
width: 25%;
}
.wizard li:after {
content: " ";
position: absolute;
left: 46%;
opacity: 0;
margin: 0 auto;
bottom: 0px;
border: 5px solid transparent;
border-bottom-color: #5bc0de;
transition: 0.1s ease-in-out;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 46%;
opacity: 1;
margin: 0 auto;
bottom: 0px;
border: 10px solid transparent;
border-bottom-color: #5bc0de;
}
.wizard .nav-tabs>li a {
width: 70px;
height: 70px;
margin: 20px auto;
border-radius: 100%;
padding: 0;
}
.wizard .nav-tabs>li a:hover {
background: transparent;
}
.wizard .tab-pane {
position: relative;
padding-top: 50px;
}
.wizard h3 {
margin-top: 0;
}
#media( max-width: 585px) {
.wizard {
width: 90%;
height: auto !important;
}
span.round-tab {
font-size: 16px;
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard .nav-tabs>li a {
width: 50px;
height: 50px;
line-height: 50px;
}
.wizard li.active:after {
content: " ";
position: absolute;
left: 35%;
}
}
<link href="https://maxcdn.bootstrapcdn.com/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<section>
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-folder-open"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-pencil"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-picture"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<h3>Step 1</h3>
<p>This is step 1</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<h3>Step 2</h3>
<p>This is step 2</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<h3>Step 3</h3>
<p>This is step 3</p>
<ul class="list-inline pull-right">
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-default next-step">Skip</button></li>
<li><button type="button" class="btn btn-primary btn-info-full next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<h3>Complete</h3>
<p>You have successfully completed all steps.</p>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</section>
</div>
</div>

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>

Bootstrap 3 mobile version won't work

I have some code here in, which when condensed into the mobile version it is improperly rendered:
the html is here(with sidenavbar)
Does anyone know how to make the boxes render properly in the mobile version
Kind regards,
.pdsa-summary-block-primary {
background-color:#428bca;
color:#fff;
}
.pdsa-summary-block-primary .summary-footer {
background-color:deepskyblue;
}
.pdsa-summary-block-primary .summary-footer a {
color:white;
}
.pdsa-summary-block-success {
background-color:#3c763d;
color:#fff;
}
.pdsa-summary-block-success .summary-footer {
background-color:green;
}
.pdsa-summary-block-success .summary-footer a {
color:white;
}
.pdsa-summary-block-info {
background-color:#31708f;
color:#fff;
}
.pdsa-summary-block-info .summary-footer {
background-color:teal;
}
.pdsa-summary-block-info .summary-footer a {
color:white;
}
.pdsa-summary-block-danger {
background-color:#a94442;
color:#fff;
}
.pdsa-summary-block-danger .summary-footer {
background-color:red;
}
.pdsa-summary-block-danger .summary-footer a {
color:white;
}
/*Structure of Summary blocks*/
.pdsa-summary-block {
position: relative;
width:100%;
margin:0.3em;
padding:1em;
min-height:15em;
}
.pdsa-summary-block .summary-background i, .pdsa-summary-block .summary-background div {
margin-left:-0.4em;
margin-top:0.1em;
font-size:8em;
opacity:0.3;
}
.pdsa-summary-block .summary-body {
position:absolute;
top:1.3em;
right:0.8em;
}
.pdsa-summary-block .summary-body .summary-line-1 {
text-align:right;
font-size:xx-large;
}
.pdsa-summary-block .summary-body .summary-line-2 {
text-align:right;
font-size:medium;
}
.pdsa-summary-block .summary-footer {
position:absolute;
bottom: 0em;
right: 0em;
width:100%;
padding:0.4em;
font-weight: 300;
text-transform: uppercase;
font-size:small;
opacity:0.6;
}
.pdsa-summary-block .summary-footer a {
text-decoration:none;
}
.pdsa-summary-block .summary-footer:hover {
opacity:1;
cursor:pointer;
}
.pdsa-sn-wrapper {
position:absolute;
top:3.6em;
left:0em;
width:13em;
height:100%;
background-color:#FF9900;
/*orange.*/
transition:left 0.3s linear;
-moz-transition:left 0.3s linear;
-webkit-transition:left 0.3s linear;
}
.pdsa-sn-wrapper ul {
list-style:none;
width:11em;
margin-top:2em;
margin-left:1em;
padding:0em;
}
.pdsa-sn-wrapper ul li {
margin-top: 1em;
margin-bottom:0.5em;
}
/* Make hover background .pdsa-sn-wrapper ul li:hover {
background-color:#760909;
} */
.pdsa-sn-wrapper ul li a {
color: white;
text-decoration:none;
padding:0.5em;
}
.pdsa-sn-wrapper ul li a:hover {
text-decoration:none;
color:white;
}
.pdsa-sn-wrapper ul li a:active, .pdsa-sn-wrapper ul li a:focus {
text-decoration:none;
outline:none;
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand {
margin-left:-0.5em;
font-size: large;
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand a {
color:white;
}
.pdsa-sn-wrapper ul .pdsa-sn-brand a:hover {
color:white;
background:none;
}
.pdsa-sn-wrapper ul li a span {
margin-top:-1em;
margin-bottom:-1em;
margin-left:1em;
margin-top: -1em;
padding-top:-1em;
padding-bottom:-1em;
}
.pdsa-sn-wrapper ul li ul {
list-style:none;
margin-top: 1em;
margin-left: 1em;
}
/*Make left nav turn into icon only on mobile*/
#media all and (max-width:768px) {
.pdsa-sn-wrapper {
left:-10em;
/*changed above to +13em. now it will take up part of screen.*/
}
.pdsa-sn-wrapper ul li:hover {
background-color:#FF9900;
}
.pdsa-sn-wrapper ul li a i {
padding-left:10em;
margin-top:-1em;
margin-bottom:-1em;
}
.body-content {
margin-left:3em;
}
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<body class="notransition">
<div class="container">
<div class="row">
<header> <a class="linkStyle" href="Default.html">My Tunes</a>
</header>
</div>
<nav id="sideNavParent" class="pdsa-sn-wrapper">
<ul>
<li class="pdsa-sn-brand">Music
</li>
<li> <a href="default.html">
<span class="visible-sm visible-md visible-lg">Home</span>
<i class="glyphicon glyphicon-home visible-xs"></i>
</a>
</li>
<li> <a href="#" data-toggle="collapse" data-target="#ulGenres">
<span class="visible-sm visible-md visible-lg">Genres <b class="caret"></b></span>
<i class="glyphicon glyphicon-globe visible-xs"></i>
</a>
<div class="visible-sm visible-md visible-lg">
<ul id="ulGenres" class="collapse" data-parent="#sideNavParent">
<li> All Genres
</li>
<li> Jazz
</li>
<li> Country
</li>
<li> Rock
</li>
</ul>
</div>
</li>
<li> <a href="#" data-toggle="collapse" data-target="#ulPlaylists">
<span class="visible-sm visible-md visible-lg">Playlists <b class="caret"></b></span>
<i class="glyphicon glyphicon-list-alt visible-xs"></i>
</a>
<div class="visible-sm visible-md visible-lg">
<ul id="ulPlaylists" class="collapse" data-parent="#sideNavParent">
<li> All Playlists
</li>
<li> My Top Rated
</li>
<li> Top Country
</li>
<li> Top Classic Rock
</li>
</ul>
</div>
</li>
<li> <a href="#">
<span class="visible-sm visible-md visible-lg">Songs</span>
<i class="glyphicon glyphicon-music visible-xs"></i>
</a>
</li>
<li> <a href="#">
<span class="visible-sm visible-md visible-lg">Downloads</span>
<i class="glyphicon glyphicon-download visible-xs"></i>
</a>
</li>
</ul>
</nav>
</div>
<div class="container body-content">
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-primary">
<div class="summary-background"> <i class="glyphicon glyphicon-globe"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">14</div>
<div class="summary-line-2">Genres</div>
</div>
<div class="summary-footer"> View Genres
<i class="glyphicon glyphicon-chevron-right" style="float:right;"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-success">
<div class="summary-background"> <i class="glyphicon glyphicon-list-alt"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">5</div>
<div class="summary-line-2">Playlists</div>
</div>
<div class="summary-footer"> See playlists...
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-info">
<div class="summary-background"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">2143</div>
<div class="summary-line-2">Songs</div>
</div>
<div class="summary-footer"> All Songs.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
<div class="col-xs-12 col-sm-4">
<div class="pdsa-summary-block pdsa-summary-block-danger">
<div class="summary-background"> <i class="glyphicon glyphicon-download"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">1</div>
<div class="summary-line-2">Downloads</div>
</div>
<div class="summary-footer"> Get Downloads.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-sm-8">
<div class="pdsa-readme-box pdsa-readme-box-primary">
<div class="readme-header"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="readme-body">
<h1>Free Music</h1>
<p>Each day we have a free song selected especially for you!</p>
</div>
<div class="readme-footer"> + See my song
</div>
</div>
</div>
</div>
</div>
</body>

This might help you in adjusting your code or as a base so you have much more control over both.
body,
html {
height: 100%;
}
body {
padding-top: 65px;
}
.navbar.navbar-default {
background: #fff;
border-bottom: none;
border-bottom: 6px solid #FF9900;
}
.sidebar-fixed {
margin-top: 50px;
padding: 5px 18px;
position: fixed;
width: 175px;
height: 100%;
top: 0;
left: 0;
background: #FF9900;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
ul.sidebar-list {
list-style: none;
display: inline;
text-align: left;
}
.sidebar-fixed #ulGenres,
.sidebar-fixed #ulPlaylists {
list-style: none;
text-align: left;
margin-left: -20px;
}
.sidebar-fixed #ulGenres > li,
.sidebar-fixed #ulPlaylists > li {
padding-top: 10px;
font-size: 13px;
}
.sidebar-fixed #ulGenres > li >a,
.sidebar-fixed #ulPlaylists > li > a {
color: #fff;
text-decoration: none;
}
ul.sidebar-list > li {
font-size: 18px;
padding-bottom: 25px;
}
ul.sidebar-list > li > a {
color: #fff;
text-decoration: none;
}
.navbar-default .collapse .navbar-nav > li > a,
.navbar-default .navbar-header a.navbar-brand {
color: #3e474f;
}
.main-content {
margin-left: 175px;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
transition: all 0.3s linear;
}
.nav-icons {
padding-top: 12px;
margin-right: 25px;
float: right;
position: absolute;
right: 0;
}
.nav-icons span {
padding-left: 10px;
padding-right: 10px;
font-size: 20px
}
.nav-icons a {
color: #FF9900;
}
#media (max-width: 767px) {
.sidebar-fixed {
width: 85px;
}
.main-content {
margin-left: 80px;
padding: 0;
}
ul.sidebar-list {
text-align: center;
}
ul.sidebar-list > li {
font-size: 12px;
padding-bottom: 25px;
}
.sidebar-fixed #ulGenres,
.sidebar-fixed #ulPlaylists {
margin-left: -40px;
text-align: center;
}
.sidebar-fixed li .nav-text,
.sidebar-fixed li span.caret {
display: none;
}
}
/*Content*/
.pdsa-summary-block-primary {
background-color: #428bca;
color: #fff;
}
.pdsa-summary-block-primary .summary-footer {
background-color: deepskyblue;
}
.pdsa-summary-block-primary .summary-footer a {
color: white;
}
.pdsa-summary-block-success {
background-color: #3c763d;
color: #fff;
}
.pdsa-summary-block-success .summary-footer {
background-color: green;
}
.pdsa-summary-block-success .summary-footer a {
color: white;
}
.pdsa-summary-block-info {
background-color: #31708f;
color: #fff;
}
.pdsa-summary-block-info .summary-footer {
background-color: teal;
}
.pdsa-summary-block-info .summary-footer a {
color: white;
}
.pdsa-summary-block-danger {
background-color: #a94442;
color: #fff;
}
.pdsa-summary-block-danger .summary-footer {
background-color: red;
}
.pdsa-summary-block-danger .summary-footer a {
color: white;
}
/*Structure of Summary blocks*/
.pdsa-summary-block {
position: relative;
width: 100%;
margin: 0.3em;
padding: 1em;
min-height: 15em;
}
.pdsa-summary-block .summary-background i,
.pdsa-summary-block .summary-background div {
margin-left: -0.4em;
margin-top: 0.1em;
font-size: 8em;
opacity: 0.3;
}
.pdsa-summary-block .summary-body {
position: absolute;
top: 1.3em;
right: 0.8em;
}
.pdsa-summary-block .summary-body .summary-line-1 {
text-align: right;
font-size: xx-large;
}
.pdsa-summary-block .summary-body .summary-line-2 {
text-align: right;
font-size: medium;
}
.pdsa-summary-block .summary-footer {
position: absolute;
bottom: 0em;
right: 0em;
width: 100%;
padding: 0.4em;
font-weight: 300;
text-transform: uppercase;
font-size: small;
opacity: 0.6;
}
.pdsa-summary-block .summary-footer a {
text-decoration: none;
}
.pdsa-summary-block .summary-footer:hover {
opacity: 1;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container-fluid">
<div class="navbar-header"> <a class="navbar-brand" href="#">My Tunes</a>
<div class="nav-icons">
<a href="#"> <span class="glyphicon glyphicon-user"></span>
</a>
<a href="#"> <span class="glyphicon glyphicon-lock"></span>
</a>
</div>
</div>
</nav>
<div class="container-fluid">
<div class="sidebar-fixed" id="sideNavParent">
<ul class="sidebar-list">
<li>
<a href="#"> <span class="nav-text"> Music</span> <span class="glyphicon glyphicon-headphones"></span>
</a>
</li>
<li>
<a href="#"> <span class="nav-text"> Home</span> <span class="glyphicon glyphicon-home"></span>
</a>
</li>
<li>
<a href="#nope" data-toggle="collapse" data-target="#ulGenres"> <span class="nav-text"> Genres </span> <span class="glyphicon glyphicon-globe"></span> <span class="caret"></span>
</a>
<ul id="ulGenres" class="collapse" data-parent="#sideNavParent">
<li> All Genres
</li>
<li> Jazz
</li>
<li> Country
</li>
<li> Rock
</li>
</ul>
</li>
<li>
<a href="#nope" data-toggle="collapse" data-target="#ulPlaylists"> <span class="nav-text"> Playlists </span> <span class="glyphicon glyphicon-list-alt"></span> <span class="caret"></span>
</a>
<ul id="ulPlaylists" class="collapse" data-parent="#sideNavParent">
<li> All Playlists
</li>
<li> My Top Rated
</li>
<li> Top Country
</li>
<li> Top Classic Rock
</li>
</ul>
</li>
<li>
<a href="#"> <span class="nav-text"> Songs </span> <span class="glyphicon glyphicon-music"></span>
</a>
</li>
<li>
<a href="#"> <span class="nav-text"> Downloads </span> <span class="glyphicon glyphicon-download"></span>
</a>
</li>
</ul>
</div>
<div class="main-content">
<div class="container-fluid">
<div class="row">
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-primary">
<div class="summary-background"> <i class="glyphicon glyphicon-globe"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">14</div>
<div class="summary-line-2">Genres</div>
</div>
<div class="summary-footer"> View Genres
<i class="glyphicon glyphicon-chevron-right" style="float:right;"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-success">
<div class="summary-background"> <i class="glyphicon glyphicon-list-alt"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">5</div>
<div class="summary-line-2">Playlists</div>
</div>
<div class="summary-footer"> See playlists...
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-info">
<div class="summary-background"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">2143</div>
<div class="summary-line-2">Songs</div>
</div>
<div class="summary-footer"> All Songs.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="pdsa-summary-block pdsa-summary-block-danger">
<div class="summary-background"> <i class="glyphicon glyphicon-download"></i>
</div>
<div class="summary-body">
<div class="summary-line-1">1</div>
<div class="summary-line-2">Downloads</div>
</div>
<div class="summary-footer"> Get Downloads.
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-12">
<div class="pdsa-readme-box pdsa-readme-box-primary">
<br>
<div class="readme-header"> <i class="glyphicon glyphicon-music"></i>
</div>
<div class="readme-body">
<h1>Free Music</h1>
<p>Each day we have a free song selected especially for you!</p>
</div>
<div class="readme-footer"> + See my song
</div>
</div>
</div>
</div>
</div>
</div>
</div>