We Keep Coding

I want to make a parent nav link sidebar active when its child is active (current page)

Here's my code:
I want it in a way that when i click on a child link, it becomes active and the parent link is active too. I utilize the css class .active for my active classes for both the main and sub-menu.
The below JS snippet works but only for the menus without sub-menus
$(document).ready(function($) {
var url = window.location.href;
var activePage = url;
$('.menu li a').each(function() {
var linkPage = this.href;
if (activePage == linkPage) {
$(this).closest("li").addClass("active");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="menu">
<ul class="list">
<li class="header">MAIN NAVIGATION</li>
<li class="">
<a href="index.php">
<i class="material-icons">home</i>
<span>Dashboard</span>
</a>
</li>
<li>
<a href="sell.php">
<i class="material-icons">receipt</i>
<span>Sell</span>
</a>
</li>
<li>
<a href="#">
<i class="material-icons">show_chart</i>
<span>Reporting</span>
</a>
</li>
<li>
<a href="javascript:void(0);" class="menu-toggle">
<i class="material-icons">apps</i>
<span>Products</span>
</a>
<ul class="ml-menu">
<li>
Add Product
</li>
<li>
All Products
</li>
<li>
Add Category
</li>
<li>
All Categories
</li>
</ul>
</li>
</ul>
</div>
<!-- #Menu -->

Implement an on mousedown event listener for your anchor tags, passing in the id for each anchor tag and use the parentElement property to get the element's parent.
document.getElementById("myLI").parentElement.nodeName;

you can try this JS code:
$(document).ready(function () {
$('a').click(function () {
//removing the previous selected menu state
$('.menu').find('li.active').removeClass('active');
//adding the state for this parent menu
$(this).parents("li").addClass('active');
});
});
And the css for Active link:
.active > a {
color:red;
}
hope it helps...

How to add active class using JQuery?

I set the active class by onclick function.
when I click A (parent li) the li tags are active.
But when I click siblings li i.e A11 are active while parent li tags are inactive, the following problems ocur:
all the siblings and parent li tags are hidden
I want to display siblings li tags along with parent li tags
My code:
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>
My javascript:
<script type="text/javascript">
$( document ).ready(function() {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
</script>

As you can see in the snippet below, the bunch of code you provided is not enough for us to answer you. The li elements are not even clickable, for us to see the behaviour you describe.
$(document).ready(function () {
$('#o_shop_collapse_category li:not(.active)').hide();
$('#category li').show();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<ul id="o_shop_collapse_category">
<li class="active"> A
<ul id="category">
<li>A11</li>
<li>A12</li>
</ul>
</li>
<li>B
<ul id="category">
<li> B12</li>
</ul>
</li>
</ul>
</div>

How to append li in ul under three div ul and li?

I want to get the li. Here is the code:
<div>
<div id="ulMenu">
<ul id="navMainTop">
<li>
<a></a>
<div>
<ul></ul>
</div>
</li>
<li>
<a class="top-menu-txt">
<i class="fa fa-offer"></i>Offers
</a>
<div class="grid-container3 blue-link" id = "serverside2">
<ul id= "serverside">
<!-- this one -->
</ul>
</div>
</li>
</ul>
</div>
</div>
i want to get the ul with id "serverside" using jQuery. Here's what I am trying:
var mJSul = '<%=myServerSideul%>';
$("#serverside").append(mJSul.toString());
But this code is not working. Could someone help me figure this out?

$( document ).ready(function() {
var mJSul = '<li><%=myServerSideul%></li>';
$("#serverside").append(mJSul);
});
Try this

CSS class not applying in the node

I am trying to add and remove class using the following script to #menuElem tag:
<script type="text/javascript">
$('#menuElem li ul').each(function (){
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function (){
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function (){
$(this).removeClass("skew");
});
</script>
Ideally this should work, but not working, Can someone help?
See below the HTML that we are adding the class, you can find menuElem inside the HTML
<!-- Header zone -->
<!-- header -->
<div class="tenantHeade fs-headerfooter-widget">
<!---->
<header>
<div id="container" class="container">
<div class="logocont">website</div>
<!-- Mobile nav btn -->
<a class="nav-toggle" href="javascript:void(0);"><span class="ada-compliant visible-xs"></span></a>
<!-- Mobile user options (for anon and preferred visitors) -->
<a href="javascript:void(0);" class="member-toggle">
<span class="ada-compliant visible-xs"></span>
</a>
<!-- Main nav -->
<nav class="main-nav inactive">
<ul id="menuElem">
<li>
<span class="antiskew">Browse Experiences</span>
<ul>
<li>
website
</li>
<li>
Local
</li>
<li>
Voluntours
</li>
<li>
Welcome website
</li>
</ul>
</li>
<li>
<span class="antiskew">Become a Member</span>
</li>
<li>
<span class="antiskew">Daily Deals</span>
</li>
</ul>

$(document).ready(function() {
$('#menuElem>li>ul').addClass("fallback browse-experience-drop-down-width");
$('#menuElem>li>a').addClass("skew");
$('#menuElem>li>ul>li>a').removeClass("skew");
});

$(document).ready(function () {
$('#menuElem li ul').each(function () {
$(this).addClass("fallback browse-experience-drop-down-width");
});
$('#menuElem li a').each(function () {
$(this).addClass("skew");
});
$('#menuElem li ul li a').each(function () {
$(this).removeClass("skew");
});
});

JQuery - Toggling divs with only selectors

If I have html such as:
<ul id="tags">
<li>
Toggle
<div>Content1</div>
</li>
<li>
Toggle
<div>Content2</div>
</li>
</ul>
How can I write a JQuery select/click event such that each link toggles the div below it?
$('#tags li a').click(function(){
$('#tags '+this.parent()+' div').slideToggle();
});
Tried something like that but its not giving me the results. Any help?

$('#tags li a').click(function(){
$(this).siblings("div").slideToggle();
});
or
$('#tags li a').click(function(){
$(this).next("div").slideToggle();
});

$('#tags li a').click(function(){
$(this).next('div').slideToggle();
});

[RE-EDIT]:
<script src="jquery.js"></script>
<ul id="tags">
<li style="display: none">
toggle
<div>Content1</div>
</li>
<li>
toggle
<div>Content2</div>
</li>
</ul>
<script>
$('ul li a').click(function(){
$("ul li").slideToggle('slow');
});
</script>
[OLD]:
<ul id="tags">
<li style="display: none">
<div>Content1</div>
</li>
<li>
<div>Content2</div>
</li>
</ul>
Toggle
<script>
$('.toggle').click(function(){
$("ul li").slideToggle('slow');
});
</script>