We Keep Coding

Select current element and change values on click

I'm new to Javascript and I've been trying to program a code that changes the value of an attribute and a style when its element is clicked. I have this code and I want that when you click on "<li class="has-sub">" it changes to "<li class="has-sub show">"... and inside it, that "<ul class="sub-menu m-sub" style="display: none;">" changes to "<ul class="sub-menu m-sub" style="display: block;">":
<li class="has-sub">
Hi
<ul class="sub-menu m-sub" style="display: none;">
<li>
Hi
</li>
</ul>
<div class="submenu-toggle"></div>
</li>
When clicked, it should look like this:
<li class="has-sub show">
Hi
<ul class="sub-menu m-sub" style="display: block;">
<li>
Hi
</li>
</ul>
<div class="submenu-toggle"></div>
</li>
I have made the attempt on my own, and tried to place this:
<script type='text/javascript'>
$(document).ready(function change() {
$(this).attr('has-sub','has-sub show');
$(this > ul).css('display','block');
})
</script>
And call the function with "onclick":
<li class="has-sub" onclick"change();">
But I haven't been able to achieve it yet...
Thanks for the help :)

You can use the parent to toggle a class that has display: none applied to it. $(this).children('ul').toggleClass('hide') will target the class hide and then toggle its class on click using toggleClass(). Set the hide class by default on the HTML sub-menu element.
$(document).ready(function(){
$('.has-sub').on('click', function(){
$(this).children('ul').toggleClass('hide')
})
})
.hide {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="has-sub show">
Hi
<ul class="sub-menu m-sub hide">
<li>
Hi
</li>
</ul>
<div class="submenu-toggle"></div>
</li>

First of all, you need to add click listener on .has-sub and after that you can add class show.
You need to add class show. It is not an attribute.
Just use .has-sub > ul to get the ul that is direct child of .has-sub.
$(document).ready(function change() {
// $(this).attr("has-sub", "has-sub show");
$(".has-sub").click(function() {
$(this).addClass("show");
$(".has-sub > ul").css("display", "block");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li class="has-sub">
Hi
<ul class="sub-menu m-sub" style="display: none;">
<li>
Hi
</li>
</ul>
<div class="submenu-toggle"></div>
</li>

You can use this as click handler, then you can remove the onclick"change();"
$(document).ready(function() {
$(".has-sub > a").on("click", function() {
// here you can use
// - $(this).parent() to do something with the li.has-sub
// - $(this).next("ul") to do something with the ul.sub-menu
});
});

Trigger anchor click on div click

I have div elements and if a div is clicked, I want to trigger a click event on the inner<a></a> tag. I need to do this, as there are validation functions on the click function of the anchor tags and they are not rendered by me.
This is my approach to do it:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
$(e.currentTarget).find('.link').trigger('click');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>
Why do I get Uncaught RangeError: Maximum call stack size exceeded and how can I fix this?

Try to add e.preventDefault(); after e.stopPropagation();

stopPropagation() only prevent to trigger parent element click, Just do it with div click:
$('.wrapperDiv').on('click', function(e) {
e.stopPropagation();
var link = $(e.currentTarget).find('.link')
var win = window.open(link.attr('href'), link.attr('target'));
win.focus();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li>
<div class="wrapperDiv">
<a class="link" href="https://google.com/" target="_self">Test A</a>
</div>
</li>
<li>
<div class="wrapperDiv">
<a class="link" href="https://bing.com/" target="_blank">Test B</a>
</div>
</li>
</ul>

Show toggle open on page load

I am struggling with below code. All I want to do is have the slide out menu( nav-container) open on page load, as at the moment its hidden until you open it with a click. How can I achieve this?
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn-nav">
<div class="bar arrow-top-r"></div>
<div class="bar arrow-middle-r"></div>
<div class="bar arrow-bottom-r"></div>
</button>
<nav class="nav-container hidden hideNav">
<ul class="nav-list">
<li class="list-item"><i class="fa fa-home"></i></li>
<li class="list-item"><i class="fa fa-credit-card-alt"></i></li>
<li class="list-item"><i class="fa fa-usb"></i></li>
<li class="list-item"><i class="fa fa-edge"></i></li>
<li class="list-item"><i class="fa fa-shopping-basket"></i></li>
</ul>
</nav>

call click:-
$(window).load(function() {
$(".btn-nav").on("click tap", function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
}).click();
});

Option 1: Fire the click event (as mentioned in a previous answer)
Option 2: Remove the click event
$(window).load(function() {
$(".nav-container").toggleClass("showNav hideNav").removeClass("hidden");
$(this).toggleClass("animated");
});

Simple Java Script Issue

I am having a terrible time with the first of the following scripts. I'm not sure if the issue is that there are two similar scripts on the page or if my HTML5 code is incorrect. Any help would be appreciated:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
</script>
<script type="text/javascript">
function MM_showHideLayers() { //v9.0
var i,p,v,obj,args=MM_showHideLayers.arguments;
for (i=0; i<(args.length-2); i+=3)
with (document) if (getElementById && ((obj=getElementById(args[i]))!=null)) { v=args[i+2];
if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }
obj.visibility=v; }
}
</script>
</head>
And the targeted HTML:
<div class=links>
<ul>
<li>
<a href="#" onclick="MM_showHideLayers('what_we_do','','show');MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','hide')" class="active btn" >WHAT WE DO</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('who_we_are','','hide');MM_showHideLayers('our_mission','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >OUR MISSION</a> |
</li>
<li>
<a href="#" onclick="MM_showHideLayers('our_mission','','hide');MM_showHideLayers('who_we_are','','show');MM_showHideLayers('what_we_do','','hide')" class="btn" >WHO WE ARE</a>
</li>
</ul>
</div>
As stated, the problem is in the first script where my intention is that the active anchor should change back to the default anchor attribute as the others are clicked by the user.
Thanks again.

Wrap all into document.ready()
<script>
$(document).ready(function(){
$('.btn').click(function(){
$('.btn').removeClass('active');
$(this).addClass('active');
});
}):
</script>

JavaScript Not Removing Class

I am working on a JavaScript class so when link is clicked that has a class of parent it will remove it and then add a class of .open
I have got addClass working but is not removing parent class when click on.
And when clicked closed should remove class open and revert it back to parent.
JavaScript Code
<script type="text/javascript">
$('.parent').on('click', function() {
$('.parent').addClass('.open').removeClass('.parent');
});
</script>
HTML Code
<div class="site-container">
<header id="header">
</header>
<div id="column_left" class="active">
<nav id="menu">
<ul class="nav">
<li><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></li>
<li><a class="parent" data-toggle="collapse" data-target="#setting"><i class="fa fa-cog"></i> <span>System</span></a>
<ul id="setting" class="nav collapse">
<li><a data-toggle="collapse" data-target="#user">Users</a>
<ul id="user" class="nav collapse">
<li>Users</li>
<li>User Group</li>
</ul>
</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="page-container">
<div class="container-fluid">
<div class="page-header">
<h1>Dashboard <small>Dashboard Stats</small></h1>
</div>
</div>
</div>
</div>

The whole idea is to toggle classes "parent" and "open" on link click.
Because of dynamical element classes it should be $(static_selector).on('click', '.parent,.open'.
JSFiddle example.
$(document).ready(function()
{
$(document).on('click', '.parent,.open', function()
{
$(this).toggleClass("parent open");
});
});

try something like this
<script type="text/javascript">
$('.parent').on('click', function() {
$(this).addClass('open').removeClass('parent');
});
</script>

You shouldn't add the period in addClass() and removeClass():
Replace:
$('.parent').addClass('.open').removeClass('.parent');
With:
$('.parent').addClass('open').removeClass('parent');
Also, it's more efficient to use $(this) instead of $('.parent') in the event listener, since this is the target of the click event. jQuery won't have to look for .parent, then.

No need to apply . as class when you add or remove class, check here
$('.parent').on('click', function() {
$('.parent').addClass('open').removeClass('parent');
});