Load Content in div without refreshing whole page - javascript

I am creating a small webapp in flask,where I have a sidebar navigation which consist of all question.
When I click on question,respective question page is rendered in right section.
But,the question which is clicked,is not selected and navigate to the top.
How, I can keep the question which is clicked selected and on focus?
body {
margin: 0;
padding: 0;
font-family: 'montserrat';
background: #e3e9f7;
}
.logo {
padding: 20px;
}
nav ul {
margin: 0;
padding: 0;
height: 100%;
width: 260px;
position: fixed;
top: 0;
left: 0;
background-color: #2b2626;
max-height: 100vh;
overflow-y: auto;
}
nav ul li {
list-style: none;
}
nav ul li a {
display: block;
font-family: 'montserrat';
text-decoration: none;
text-transform: uppercase;
font-size: 17px;
color: #fff;
position: relative;
padding: 15px 0px 15px 25px;
transition: all 0.5s;
}
nav ul li a:before {
content: '';
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #e3e9f7;
border-radius: 40px 0 0 40px;
z-index: -1;
transition: all 1s;
}
nav ul li a:hover {
color: #2b2626;
}
nav ul li a:hover:before {
width: 95%;
}
.wrapper {
margin-left: 260px;
}
.section {
display: grid;
top: 60px;
min-height: 100vh;
text-align: center;
}
.box-area h2 {
text-transform: uppercase;
font-size: 30px;
}
#myBtn {
position: fixed;
bottom: 20px;
left: 200px;
z-index: 99;
font-size: 8px;
border: none;
outline: none;
background-color: red;
color: white;
cursor: pointer;
padding: 15px;
border-radius: 4px;
}
nav ul#my-ul {
scroll-behavior: smooth;
}
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="crossorigin="anonymous"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
function scrollToTop() {
const el = document.getElementById("my-ul");
el.scrollTop = 0;
}
</script>
<link rel="stylesheet" href="{{ url_for('static', filename='css/main.css') }}">
</head>
<nav id="my-div">
<ul id="my-ul">
<li class="logo"><img src="https://i.imgur.com/E26Pj54.png"></li>
<li><i class="fa fa-home"></i> Home</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
<li><i class="fa fa-book"></i> Book</li>
<li><i class="fa fa-users"></i> Users</li>
<li><i class="fa fa-picture-o"></i> Pictures</li>
<li><i class="fa fa-phone"></i> Contact</li>
</ul>
</nav>
<div class="wrapper">
<div class="section">
<div class="box-area">
{% block content %}
{% endblock %}
</div>
</div>
</div>
<button id="myBtn" onclick="scrollToTop()">Back To Top Question</button>
</script>
</html>


Use below syntax.
function scrollToTop() {
window.scrollTo(0, 0);
}

Related

Get current height of navigaiton bar

I currently want to get the current height of the navigation so that when it transitions from position block to flex the aside element can align itself accordingly.
Here the navigation, normally it will stay at the top of website, but when i scroll over 20 it will change postion to fixed to stick to top of the website
<nav>
<i class="uil uil-list-ul" id="inMenu"></i>
<img src="../../imgs/BCG-logos_white.png" alt="">
<form id="search" action="">
<input type="text" placeholder="Your Books">
<button><i class="uil uil-search"></i></button>
</form>
<div id="Login">
<i class="uil uil-draggabledots"></i>
<button><i class="uil uil-user"></i> Đăng Nhập</button>
</div>
</nav>
Here is the aside
It is okay when the nav hasn't added a class fixed yet, but when it does the aside will automatically push up to the top of the website and cover a part of the navigation.
/* Navigation */
nav {
background-color: #172B4D;
display: flex;
padding: 5px 30px;
position: relative;
align-items: center;
justify-content: space-between;
z-index: 100;
}
.fixed {
position: fixed;
top: 0;
}
/ * Navigation hidden menu */ nav>i {
font-size: 15px;
color: #F0F0F0;
position: absolute;
top: 40px;
left: 15px;
transition: transform 1s, background-color 1s;
background-color: #172B4D;
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
}
nav>i:hover {
background-color: #000000;
transform: rotate(0.5turn);
}
/ * End Navigation Hidden Menu */
/* Navigation Logo Image */
nav>img {
width: 7%;
}
/* End of Logo Navigation */
/* Search Navigation */
nav>form {
width: 40%;
display: flex;
}
nav>form>input {
width: 90%;
height: 25px;
border: none;
outline: none;
padding: 0 10px;
border-radius: 45px 0 0 45px;
}
nav>form>button {
width: 10%;
border: none;
border-radius: 0 45px 45px 0;
cursor: pointer;
}
/* End Search Navigation */
/* Setting and Login Navigation */
nav>#Login {
width: 115px;
display: flex;
justify-content: space-between;
align-items: center;
}
nav>#Login>i {
color: #F0F0F0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
cursor: pointer;
transition: background-color 0.75s, transform 0.75s;
}
nav>#Login>i:hover {
background-color: #000000;
transform: rotate(0.25turn);
}
nav>#Login>button {
background-color: transparent;
border: none;
color: #F0F0F0;
border-radius: 45px;
padding: 2px 4px;
cursor: pointer;
transition: background-color 0.5s;
}
nav>#Login>button:hover {
background-color: #000000;
}
/* End Setting and Log Navigation */
/* End Navigation */
/* Article */
article {
height: 5000px;
}
/* Aside */
aside {
background-color: #172B4D;
color: #F0F0F0;
padding-top: 30px;
position: fixed;
overflow: auto;
transition: width 0.75s;
height: 100%;
z-index: 100;
}
/* Hide aside button */
aside>i {
position: absolute;
top: 10px;
right: 10px;
transition: color .5s;
}
aside>i:hover {
color: #5895ff;
}
/* End hidden aside button */
/* Menu heading */
aside>.menu-header {
cursor: pointer;
}
aside>.menu-header>h4:hover {
color: #86785d;
background-color: #021537;
cursor: pointer;
}
aside>.menu-header>h4 {
padding: 5px 10px;
background-color: #00225d;
border: 1px solid #172B4D;
font-size: 0px;
transition: font-size 0.75s;
color: #B3BAC5;
}
/* End menu item */
/* Sub menu item */
aside>.menu-header>ul {
padding-left: 30px;
list-style: none;
height: 0;
overflow: hidden;
}
aside>.menu-header>.show {
height: unset;
}
.menu-header>ul>li>a {
color: #E3EDFF;
font-size: 13px;
padding: 5px;
text-decoration: none;
}
.menu-header>ul>li>a:hover {
color: #86785d;
}
/* End menu sub-item */
/* End Aside */
<aside style="width: 0px;">
<i class="uil uil-times-square" id="outMenu"></i>
<div class="menu-header" id="BookTag">
<h4><i class="uil uil-label-alt"></i> Book Tag</h4>
<ul>
<li><i class="uil uil-book "></i> Sách Việt Nam</li>
<li><i class="uil uil-book "></i> Sách Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="ComicTag">
<h4><i class="uil uil-label-alt"></i> Comic Tag</h4>
<ul>
<li><i class="uil uil-swatchbook"></i> Truyện Việt Nam</li>
<li><i class="uil uil-swatchbook"></i> Truyện Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="GameTag">
<h4><i class="uil uil-label-alt"></i> Game Tag</h4>
<ul>
<li><i class="uil uil-headphones-alt "></i> Game Việt Nam</li>
<li><i class="uil uil-headphones-alt "></i> Game Ngoại Quốc</li>
</ul>
</div>
<div class="menu-header" id="Author">
<h4><i class="uil uil-edit-alt"></i> Author</h4>
<ul>
<li><i class="uil uil-book-open"></i> Review DashBoard</li>
<li><i class="uil uil-books"></i> Review Request</li>
<li><i class="uil uil-book-reader"></i> Top Author</li>
</ul>
</div>
<div class="menu-header" id="forum">
<h4><i class="uil uil-podium"></i> Forum</h4>
<ul>
<li><i class="uil uil-download-alt"></i> Download Book</li>
<li><i class="uil uil-post-stamp"></i> Book Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Book</li>
<li><i class="uil uil-download-alt"></i> Download Comic</li>
<li><i class="uil uil-post-stamp"></i> Comic Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Comic</li>
<li><i class="uil uil-download-alt"></i> Download Game</li>
<li><i class="uil uil-post-stamp"></i> Game Request</li>
<li><i class="uil uil-arrow-growth"></i> Nomination Game</li>
<li><i class="uil uil-envelope"></i> Create discuss</li>
</ul>
</div>
<div class="menu-header" id="About">
<h4><i class="uil uil-channel"></i> About Us</h4>
</div>
<div class="menu-header" id="Contact">
<h4><i class="uil uil-comment-alt-medical"></i> Contact Us</h4>
</div>
<div class="menu-header" id="FAQ">
<h4><i class="uil uil-question-circle"></i> FAQ</h4>
</div>
</aside>
<script>
var nav = document.querySelector('nav');
window.addEventListener('scroll', function() {
if (window.scrollY >= 20) {
nav.classList.add("fixed");
document.querySelector('#s-1').style.paddingTop = "130px";
document.querySelector('aside').style.marginTop = "35px";
} else {
nav.classList.remove("fixed");
document.querySelector('#s-1').style.paddingTop = "50px";
document.querySelector('aside').style.marginTop = "unset";
}
})
</script>
here I don't want to set the margin top manually but will change accord to navigation

ResizeObserver API can be used for attaching event handlers on resize events.
Here is an example
function resizeHandler(entries) {
for (let entry of entries) {
if (entry.target.id == "box") {
const width = entry.contentRect.width;
const height = entry.contentRect.height;
entry.target.innerText = `My size\n width: ${width}\n height: ${height}`
}
}
}
new ResizeObserver(resizeHandler).observe(document.querySelector("#box"))
#box {
width: 50%;
height: 100px;
border: 8px red solid;
}
<div id="box">
Resize me!
</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.

Side navigation with top, bottom, and overflow

I'm trying to create a side navigation with a top & bottom. When the window height shrinks, I want the bottom navigation to overlap the top & the top navigation to have a scroll. I put in some CSS gradient to help indicate to the user that items are overflowed but instead I want a scrollbar. I only want the scrollbar if the content is overflowed (likely requires JS but I could be wrong).
Help appreciated
Fiddle here, HTML & CSS below.
html,
body {
margin: 0;
padding: 0;
overflow: hidden;
box-sizing: border-box;
background-color: #fff;
}
html,
body,
.pane-sidebar {
height: 100%;
}
.pane-sidebar {
background-color: #456081;
position: relative;
text-align: center;
width: 75px;
}
.full-height,
.k-splitter.full-height {
height: 100%;
padding: 0;
margin: 0;
}
.pane-sidebar .sidebar-menu-wrapper {
padding: 1.25rem 0;
min-height: 40rem;
overflow: auto;
}
.pane-sidebar .brand {
padding: 0;
margin: 0;
font-weight: normal;
font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
font-size: 0.875rem;
color: #ffffff;
}
.pane-sidebar ul.primary {
min-height: 26.25rem;
}
.pane-sidebar ul {
list-style: none;
margin: 0;
padding: 2rem 0;
text-align: center;
}
.pane-sidebar ul li {
padding-bottom: 1.5rem;
}
.pane-sidebar ul li.secondary {
padding-bottom: 0.625rem;
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
.pane-sidebar ul li a {
font-size: 2rem;
color: #ffffff;
text-decoration: none;
display: block;
}
.pane-sidebar ul li.secondary a span {
font-size: 0.625rem;
}
.pane-sidebar ul li a span {
font-size: 0.75rem;
color: #ffffff;
display: block;
}
.pane-sidebar ul.secondary {
position: absolute;
bottom: 0;
left: 50%;
width: 4rem;
margin-left: -2rem;
background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #456081 15%, #456081 100%);
}
.pane-sidebar ul li.secondary a,
.pane-sidebar ul li.secondary button {
font-size: 1.125rem;
}
button {
background-color: transparent;
border: 0 none;
}
.pane-sidebar .show-errors {
cursor: pointer;
}
button {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
overflow: visible;
text-transform: none;
background-color: #4b708b;
color: #fff;
padding: 0.25rem;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
<div class="pane-sidebar full-height">
<div class="sidebar-menu-wrapper">
<h1 class="brand">Brand</h1>
<ul class="primary">
<li>
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
<li class="secondary">
<a href="#">
<i class="far fa-sticky-note"></i>
<span>Top</span>
</a>
</li>
</ul>
<ul class="secondary">
<li class="secondary">
<button class="show-errors" type="button">
<i class="far fa-bell"></i>
</span>
</button>
</li>
<li class="secondary">
<a href="#">
<i class="fas fa-box"></i>
<span>Bottom</span>
</a>
</li>
</ul>
</div>

You could use flexbox on the menu-wrapper. Then make your primary fill the extra space and show a scrollbar:
.sidebar-menu-wrapper {
display: flex;
flex-direction: column;
flex-wrap: nowrap;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
}
.primary {
flex: 1;
overflow-y: auto;
}
Here is a fiddle: https://jsfiddle.net/mehg8uL2/

li menu title hides when hovering over child ul sub menu

I am in the process of building this dashboard the problem is when i hover over the li in the sidebar then the sub menu shows but when I take the cursor away from the menu title to the submenu ul then the heading disappears.
Test the code after expanding the window size to full. I have marked the code which is responsible for showing menu on hover with the title "Code Responsible for showing menu on hover"
Also i cant get rid of that black mark over the title
https://i.imgur.com/TVnKPMG.png
var toggler = document.querySelector('.toggler');
var minWidth768 = window.matchMedia("(min-width: 768px)");
var maxWidth767 = window.matchMedia("(max-width: 767px)");
var bdy = document.querySelector('.bdy');
toggler.addEventListener("click", function() {
if(minWidth768.matches) {
bdy.classList.toggle('sidebar-collapse');
} else if(maxWidth767.matches) {
bdy.classList.toggle('sidebar-expand');
}
});
var treeview = document.querySelectorAll(".treeview > .treeview-menu");
var submenu = document.querySelectorAll(".treeview ul");
for (var i=0; i<treeview.length; i++) {
treeview[i].parentNode.addEventListener("click", function(ev) {
ev.preventDefault();
this.classList.toggle("menu-open");
for (var x=0; x<treeview.length; x++){
submenu[x].addEventListener("click", function(e) {
e.stopPropagation();
})
}
});
}
/*HEADER*/
* {
transition: all 300ms linear;
}
.main-header {
position: relative;
max-height: 100px;
z-index: 1030;
}
.main-header .logo {
display: block;
float: left;
height: 50px;
font-size: 20px;
line-height: 50px;
text-align: center;
width: 230px;
padding: 0 15px;
font-weight: 300;
background: #7f224f;
overflow: hidden;
color: #fff;
}
.main-header .navbar {
margin-bottom: 0;
margin-left: 230px;
border: none;
min-height: 50px;
border-radius: 0;
background: #9b265f;
}
.toggler {
margin-top:10px;
font-size: 20px;
color: white;
cursor: pointer;
margin-left: 10px;
}
.logo-mini {
display: none;
}
/*SIDEBAR*/
#main-sidebar{
position: absolute;
top: 0;
left: 0;
padding-top: 70px;
min-height: 100%;
width: 230px;
z-index: 810;
background: #222d32;
}
.user-panel {
position: relative;
width: 100%;
padding: 10px;
overflow: hidden;
}
.user-p-image img {
width: 100%;
max-width: 50px;
height: auto;
}
.user-panel .info {
padding: 5px 5px 5px 15px;
line-height: 1;
position: absolute;
left: 55px;
color: #fff;
}
.sidebar-menu {
list-style: none;
margin: 0;
padding: 0;
}
.sidebar-menu > li {
position: relative;
margin: 0;
padding: 0;
}
.sidebar-menu li.header {
padding: 10px 25px 10px 15px;
font-size: 12px;
color: #4b646f;
background: #1a2226;
}
.sidebar a {
color: #b8c7ce;
text-decoration: none;
}
.sidebar-menu > li > a {
padding: 12px 5px 12px 15px;
display: block;
background: #111618;
margin: 6px 0;
}
/*SIDEBAR TOGGLE CODE*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .main-header .logo {
width: 50px !important;
}
.bdy.sidebar-collapse .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-collapse .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-collapse .main-header .navbar {
margin-left: 50px;
}
.bdy.sidebar-collapse #main-sidebar {
width: 50px !important;
}
.bdy.sidebar-collapse #content-wrapper {
margin-left: 50px;
}
}
#media (max-width: 767px) {
.main-header .logo {
width: 0px;
}
.main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.main-header .logo > .logo-lg {
display: none;
}
.main-header .navbar {
margin-left: 0px;
}
#main-sidebar {
width: 0px !important;
padding-left: 0px !important;
overflow: hidden;
}
#content-wrapper {
margin-left: 0px !important;
}
.bdy.sidebar-expand .main-header .logo {
width: 230px;
}
.bdy.sidebar-expand .main-header .logo > .logo-mini {
display: block;
margin-left: -15px;
margin-right: -15px;
font-size: 18px;
}
.bdy.sidebar-expand .main-header .logo > .logo-lg {
display: none;
}
.bdy.sidebar-expand .main-header .navbar {
margin-left: 230px;
}
.bdy.sidebar-expand #main-sidebar {
width: 230px !important;
}
.bdy.sidebar-expand #content-wrapper {
margin-left: 230px;
}
}
/*END OF TOGGLE CODE*/
/*LIST TOGGLE*/
.treeview-menu {
display: none;
}
.treeview.menu-open .treeview-menu{
display: block;
}
/*END OF LIST TOGGLE*/
/*Code Responsible for showing menu on hover*/
#media (min-width: 768px) {
.bdy.sidebar-collapse .sidebar-menu > li > a > span,
.bdy.sidebar-collapse .sidebar-menu > li > .treeview-menu {
display: none !important;
}
.bdy.sidebar-collapse .sidebar-menu > li > a:hover span {
display: block !important;
position: absolute;
top: 0;
width: 180px;
background: #111618;
padding: 12px 0;
left: 49px;
z-index: 99999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover .treeview-menu {
display: block !important;
background: grey;
position: absolute;
width: 180px;
left: 49px;
z-index: 999999999999;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > a > .pull-right-container {
position: relative !important;
float: right;
width: auto !important;
left: 180px !important;
top: -22px !important;
z-index: 900;
}
.bdy.sidebar-collapse .sidebar-menu > li:hover > .treeview-menu {
top: 44px;
margin-left: 0;
}
}
/*CONTENT*/
#content-wrapper {
padding: 15px;
margin-left: 230px;
min-height: 100%;
}
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<div class="bdy">
<div class="wrapper">
<header class="main-header">
<a href="index.html" class="logo">
<!-- mini logo for sidebar mini 50x50 pixels -->
<span class="logo-mini"><b>K</b>Ame</span>
<!-- logo for regular state and mobile devices -->
<span class="logo-lg"><b>Ame</b>Xub</span>
</a>
<nav class="navbar navbar-default">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<div class="toggler"><i class="fa fa-bars" aria-hidden="true"></i></div>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
Dinesh Thapa <span class="caret"></span>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li role="separator" class="divider"></li>
<li>Separated link</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</nav>
</header>
<div id="main-sidebar">
<div class="sidebar">
<div class="user-panel">
<div class="pull-left user-p-image">
<img src="user.jpg" class="img-circle">
</div>
<div class="pull-left info">
<p>Dinesh Thapa</p>
<i class="fa fa-circle text-success"></i> Online
</div>
</div>
<ul class="sidebar-menu" data-widget="tree">
<li class="header">MAIN NAVIGATION</li>
<li class="treeview">
<a href="#">
<i class="fa fa-dashboard"></i> <span class='nme'>Dashboard</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Dashboard v1</li>
<li class="active"><i class="fa fa-circle-o"></i> Dashboard v2</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<i class="fa fa-files-o"></i>
<span>Layout Options</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li><i class="fa fa-circle-o"></i> Top Navigation</li>
<li><i class="fa fa-circle-o"></i> Boxed</li>
<li><i class="fa fa-circle-o"></i> Fixed</li>
<li><i class="fa fa-circle-o"></i> Collapsed Sidebar</li>
</ul>
</li>
<li class="treeview">
<a href="#">
<span>dsdssdd</span>
</a>
</li>
</ul>
</div>
</div>
<div id="content-wrapper">
<div class="row">
<h1>zzzzzzzzzzzzzzzzzzzzzzzzzzzzzzz</h1>
</div>
<footer style="position: absolute; bottom: 0;">
copyright
</footer>
</div>
</div> <!-- wrapper -->
</div> <!--bdy -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
https://jsfiddle.net/nd9ky5x2/

Adding a class transversely with JQuery based on click event

Background
I am building a notifications dropdown that shows when the notification has been read or unread. The user has a the ability to mark the notification as "read" by clicking on the icon thus turning it in to a check mark and a tooltip that changes to the option to make it unread. So, if it's unread, the icon is yellow and the tooltip says "Mark as read". If the user clicks on it to make it read, the icon switches to a check mark, it turns green, and the tooltip changes text to mark it as unread. All that is working, however, there is yet another icon on the left side of the li that I would like to toggle to background green when the user clicks on the icon I explained above.
What have I tried?
I tried playing around with the .parent(), .siblings(), .find() and other methods since I am almost certain that they will be my solution, but I unfortunaly either got the all of the to toggle, or none at all, or the right icon stops working, etc. I'm obviously not structuring my function parameters right.
I hard-coded the bg-success class on the middle li to show you what I am trying to achieve.
So, if someone could help me turn that doggone left icon's background green by adding the bg-success class when the "read/unread" icon in it's own li is clicked, I would really appreciate it.
Here is my CODEPEN
And here is my code also:
HTML
<div class="container">
<header>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle has-notify" data-click="toggle-notify">
<i class="fa fa-bell"></i>
</a>
<ul class="dropdown-menu dropdown-notification pull-right">
<li class="dropdown-header">Notifications (5)</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-exclamation-triangle"></i></div>
<div class="message"><p class="desc">Server down on 1/24/2016.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="unread" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media bg-success"><i class="fa fa-thumb-tack"></i></div>
<div class="message"><p class="desc">Approve documents in outbox.</p></div>
<div class="option read" data-toggle="tooltip" data-title="Mark as Unread" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-calendar-plus-o"></i></div>
<div class="message"><p class="desc">New event posted.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
</ul>
</li>
</ul>
</header>
</div>
CSS
.navbar-nav .open .dropdown-menu {
position: absolute;
background: #000;
border: 1px solid;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.25);
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar .dropdown-menu {
max-width: 360px;
left: 0;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid rgba(248,151,29,0.77);
color: rgba(248,151,29,0.77);
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
text-transform: uppercase;
font-family: "ABeeZee",sans-serif;
}
.dropdown-menu>li.dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid #bbb;
}
.dropdown-notification>li.notification-item {
position: relative;
}
.navbar-nav .open .dropdown-notification>li.notification-item>a {
padding: 15px 20px;
}
.dropdown-notification>li.notification-item a {
padding: 15px 20px;
}
.dropdown-menu>li>a {
font-size: 12px;
padding: 5px 20px;
color: #bbb;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background: #101113;
color: #bbb;
}
.dropdown-notification>li.notification-item a:before,
.dropdown-notification>li.notification-item a:after {
content: '';
display: table;
clear: both;
}
.dropdown-notification>li.notification-item .media {
float: left;
width: 40px;
height: 40px;
overflow: hidden;
text-align: center;
line-height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background: #ccc;
color: #000;
}
.dropdown-notification>li.notification-item .media i {
font-size: 15px;
}
.dropdown-notification>li.notification-item .media+.message {
margin-left: 50px;
}
.dropdown-notification>li.notification-item .message {
padding-right: 20px;
}
.dropdown-notification>li.notification-item .desc {
font-size: 12px;
font-weight: 300;
margin-bottom: 3px;
color: #8f8f8f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #bbb;
}
.dropdown-notification>li.notification-item .option {
position: absolute;
right: 10px;
top: 10px;
padding: 5px 10px;
font-size: 12px;
}
.dropdown-notification>li.notification-item .option .fa:before {
color: #F8971D;
}
.dropdown-notification>li.notification-item .option.read .fa:before {
content: '\f058';
color: #47a877;
}
.bg-success {
background: #47a877 !important;
}
JQUERY
$('[data-click="set-message-status"]').on('click', function (e) {
e.stopPropagation();
e.preventDefault();
var status = $(this).attr('data-status');
var tooltipText = 'Mark as Read';
if (status == 'read') {
$(this).removeClass('read');
//$('.notification-item').find('.media').removeClass('bg-success');
$(this).attr('data-status', 'unread');
//$('.notification-item').find('.media').attr('data-status', 'unread');
} else {
$(this).addClass('read');
//$('.notification-item').find('.media').addClass('bg-success');
$(this).attr('data-status', 'read');
//$('.notification-item').find('.media').attr('data-status', 'read');
tooltipText = 'Mark as Unread';
}
$(this).tooltip('hide').attr('data-original-title', tooltipText).tooltip('fixTitle');
});
Thank you!

Targeting the media class of the clicked icon "read/unread" using $(this).parents('a').find('.media') and adding/removing class using addClass()/removeClass() methodes :
$(this).parents('a').find('.media').addClass('bg-success'); //add class
//And
$(this).parents('a').find('.media').removeClass('bg-success'); //remove class
Hope this helps.
Snippet
$('[data-click="set-message-status"]').on('click', function (e) {
e.stopPropagation();
e.preventDefault();
var status = $(this).attr('data-status');
var tooltipText = 'Mark as Read';
if (status == 'read') {
$(this).removeClass('read');
//$('.notification-item').find('.media').removeClass('bg-success');
$(this).attr('data-status', 'unread');
//$('.notification-item').find('.media').attr('data-status', 'unread');
$(this).parents('a').find('.media').removeClass('bg-success');
} else {
$(this).addClass('read');
//$('.notification-item').find('.media').addClass('bg-success');
$(this).attr('data-status', 'read');
//$('.notification-item').find('.media').attr('data-status', 'read');
$(this).parents('a').find('.media').addClass('bg-success');
tooltipText = 'Mark as Unread';
}
$(this).tooltip('hide').attr('data-original-title', tooltipText).tooltip('fixTitle');
});
.navbar-nav .open .dropdown-menu {
position: absolute;
background: #000;
border: 1px solid;
-webkit-box-shadow: 0 3px 8px rgba(0,0,0,0.25);
box-shadow: 0 3px 8px rgba(0,0,0,0.25);
}
.navbar .dropdown-menu.pull-right {
right: 0;
left: auto;
}
.navbar .dropdown-menu {
max-width: 360px;
left: 0;
}
.navbar-nav .open .dropdown-menu .dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid rgba(248,151,29,0.77);
color: rgba(248,151,29,0.77);
font-size: 15px;
font-weight: 100;
letter-spacing: 1px;
text-transform: uppercase;
font-family: "ABeeZee",sans-serif;
}
.dropdown-menu>li.dropdown-header {
padding: 5px 20px 8px;
border-bottom: 1px solid #bbb;
}
.dropdown-notification>li.notification-item {
position: relative;
}
.navbar-nav .open .dropdown-notification>li.notification-item>a {
padding: 15px 20px;
}
.dropdown-notification>li.notification-item a {
padding: 15px 20px;
}
.dropdown-menu>li>a {
font-size: 12px;
padding: 5px 20px;
color: #bbb;
}
.dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
background: #101113;
color: #bbb;
}
.dropdown-notification>li.notification-item a:before,
.dropdown-notification>li.notification-item a:after {
content: '';
display: table;
clear: both;
}
.dropdown-notification>li.notification-item .media {
float: left;
width: 40px;
height: 40px;
overflow: hidden;
text-align: center;
line-height: 40px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
border-radius: 50%;
background: #ccc;
color: #000;
}
.dropdown-notification>li.notification-item .media i {
font-size: 15px;
}
.dropdown-notification>li.notification-item .media+.message {
margin-left: 50px;
}
.dropdown-notification>li.notification-item .message {
padding-right: 20px;
}
.dropdown-notification>li.notification-item .desc {
font-size: 12px;
font-weight: 300;
margin-bottom: 3px;
color: #8f8f8f;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
p {
color: #bbb;
}
.dropdown-notification>li.notification-item .option {
position: absolute;
right: 10px;
top: 10px;
padding: 5px 10px;
font-size: 12px;
}
.dropdown-notification>li.notification-item .option .fa:before {
color: #F8971D;
}
.dropdown-notification>li.notification-item .option.read .fa:before {
content: '\f058';
color: #47a877;
}
.bg-success {
background: #47a877 !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<header>
<ul class="nav navbar-nav navbar-right">
<li class="dropdown open">
<a href="javascript:;" data-toggle="dropdown" class="dropdown-toggle has-notify" data-click="toggle-notify">
<i class="fa fa-bell"></i>
</a>
<ul class="dropdown-menu dropdown-notification pull-right">
<li class="dropdown-header">Notifications (5)</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-exclamation-triangle"></i></div>
<div class="message"><p class="desc">Server down on 1/24/2016.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="unread" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media bg-success"><i class="fa fa-thumb-tack"></i></div>
<div class="message"><p class="desc">Approve documents in outbox.</p></div>
<div class="option read" data-toggle="tooltip" data-title="Mark as Unread" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-calendar-plus-o"></i></div>
<div class="message"><p class="desc">New event posted.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="read" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
</ul>
</li>
</ul>
</header>
</div>

Select the closest .notification-item ancestor based on the clicked element by using the .closest() method. Which would be $(this).closest('.notification-item').find('.media').
You can also chain the attr() method after the .addClass()/.removeClass() methods as well:
Updated Example
if (status === 'read') {
$(this).removeClass('read').attr('data-status', 'unread');
$(this).closest('.notification-item').find('.media').removeClass('bg-success').attr('data-status', 'unread');
} else {
$(this).addClass('read').attr('data-status', 'read');
$(this).closest('.notification-item').find('.media').addClass('bg-success').attr('data-status', 'read');
tooltipText = 'Mark as Unread';
}
As a side note, you could also use $(this).prevAll('.media').first() in order to select the previous .media element:
Updated Example
if (status === 'read') {
$(this).removeClass('read').attr('data-status', 'unread');
$(this).prevAll('.media').first().removeClass('bg-success').attr('data-status', 'unread');
} else {
$(this).addClass('read').attr('data-status', 'read');
$(this).prevAll('.media').first().addClass('bg-success').attr('data-status', 'read');
tooltipText = 'Mark as Unread';
}
You can also shorten the logic by using .toggleClass() in place of .addClass()/.removeClass().
Updated Example
var tooltipText = status === 'read' ? 'Mark as Unread' : 'Mark as Read';
var newStatus = status === 'read' ? 'unread' : 'read';
$(this).toggleClass('read', status !== 'read').attr('data-status', newStatus);
$(this).prevAll('.media').first().toggleClass('bg-success', status !== 'read').attr('data-status', newStatus);

If your html structure is unlikely to change, then, given this:
<li class="notification-item">
<a href="javascript:;">
<div class="media"><i class="fa fa-exclamation-triangle"></i></div>
<div class="message"><p class="desc">Server down on 1/24/2016.</p></div>
<div class="option" data-toggle="tooltip" data-title="Mark as Read" data-click="set-message-status" data-status="unread" data-container="body"><i class="fa fa-circle-o"></i></div>
</a>
</li>
and
$('[data-click="set-message-status"]').on('click', function (e) {
then $(this) is the div.option so to get to the i.fa you can either go across to .media then down to i.fa :
var fa = $(this).siblings(".media").find("i.fa")
or, to give a bit more flexibility to your html, go up to the best-fit container (the li not the a) then down to the icon:
var fa = $(this).closest("li.notification-item").find(".media > i.fa")
you need the extra .media > as there are two i.fa and this will give you specifically the first one.
Alternatively, you can just change both at the same time
var fa = $(this).closest("li.notification-item").find("i.fa")

I think you navigate up until the the "a" element and then do the find from there, but to make sure you get just the right element you should star from the event target, like this, for example:
$(this).parent().find(".media").removeClass('bg-success');
In this case the $(this) referers to the item defined on the observer, the div with the data-click attribute where the clicking ocurred.
You could change the $(this) for $(e.target), and the ".parent()" for ".closest('a')" or ".closest('li')"

Categories