We Keep Coding

Toggle class on element, ignore all but one child

Having a hard time solving this even after reading jQuery stopPropagation for only some class of elements, Javascript toggle class on element and countless other references.
I want to toggle class "active" when clicking on nav > ul > li AND .dd-toggle (a child of .dropdown) but NOT .dropdown itself or anything within it (other than .dd-toggle).
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>
I have tried numerous variations starting with:
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).closest().toggleClass( "active" );
});
});
then
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function() {
$( this ).toggleClass( "active" );
});
$('.dropdown').click(function(e) {
return false;
});
});
and finally
jQuery(document).ready(function($){
$( "nav > ul > li" ).click(function( event ) {
event.stopImmediatePropagation();
$( this ).toggleClass( "active" ).not('.dropdown');
});
});
I get ignoring the children of or closest to, but can't figure out how to do that but still observe a child of the child. Perhaps only first child of?
Ignore .dropdown but NOT .dd-toggle
Am I close?

I would really recommend reading:
Decoupling Your HTML, CSS, and JavaScript. It will really reduce your tightly coupled code.
Everything in Green will change to red, unless you are in blue (in green). Although I'm not sure (because you're question isn't clear) if you're asking for active on either the li and the .dd-toggle (as it is now) or only the li which wouldn't be hard.
If you need active only on the li simply change the .dd-toggle code to:
$(this).parents('li').first().toggleClass('active');
CodePen.IO Working Example
$(document).ready(function() {
$("nav > ul > li").on("click", function(e) {
if ($(e.target).parents('.dropdown').length === 0 &&
!$(e.target).hasClass('dropdown')) {
$(this).toggleClass("active");
}
});
$(".dd-toggle").on("click", function(e) {
$(this).toggleClass("active");
});
});
nav > ul > li, .dd-toggle {
border: 2px solid green;
cursor: pointer;
user-select: none;
}
.active {
border: 2px solid red;
}
.dropdown {
border: 2px solid blue;
cursor: default;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav class="nav-dropdowns" role="navigation">
<ul>
<li class="">
<span class="dropdown-title">Price</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-price" class="field"><label>Price Range</label>
<div class="details"></div>
</div>
</div> <button type="submit" class="extra-submit buttonstyle">Search</button>
</div>
</li>
<li class="">
<span class="dropdown-title">Type</span>
<div class="dropdown">
<a class="dd-toggle">X</a>
<div id="field-type" class="field"><label>Property Type</label>
<div class="details"></div>
</div> <button type="submit">Search</button>
</div>
</li>
<li class="search-submit">
<button class="search-button" type="submit">Search</button>
</li>
</ul>
</nav>

Add/remove class/id to nav when scrolling to that posistion

right now i have this code to indicate on the nav links what id i am on.
But how can i also add a scroll function, if i scroll down to specific id then add the class to the right nav link. Thank you.
$(window).load(function(){
$("nav.site-nav ul.open.desktop li a").click(function() {
$('.current_yes').removeClass('current_yes');
$(this).addClass("current_yes");
});
});
jQuery(document).ready(function($){
var url = window.location.href;
$('nav.site-nav ul.open.desktop li a').filter(function() {
return this.href == url;
}).closest('a').addClass('current_yes');
});
and the nav look like this:
<div class="wrapper">
<nav class="site-nav">
<div class="menu-toggle">
<div class="hamburger"></div>
</div>
<ul class="open desktop">
<li><a id="link1" href="index.php#"><i class="site-nav--icon"></i>Hem</a></li>
<li><a id="link2" href="index.php#products-anchor"><i class="site-nav--icon"></i>Produkter</a></li>
<li><a id="link3" href="index.php#uthyres-anchor"><i class="site-nav--icon"></i>Uthyres</a></li>
<li><a id="link4" href="#rent"><i class="site-nav--icon"></i>Kontakta</a></li>
</ul>
</nav>
</div>
The css for current link:
.current_yes {
border-bottom: 2px solid #732813;
}

How to change a css class of a page element if you come from a specific web or link?

I've implemented a "Tab" functionality inside one of my pages. Following is the code:
$(document).ready(function() {
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})
})
.tab.current {
color: red;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<ul class="tabs">
<li class="tab current" data-tab="tab-1">Overview</li>
<li class="tab" data-tab="tab-2">Get started</li>
</ul>
<article id="tab-1" class="tab-content current">TAB 1</article>
<article id="tab-2" class="tab-content">TAB 2</article>
It works perfect, but only in this page. What I want to achieve is to have links from another page (index.html) to this one (features.html) with a specific tab selected.
Is there any simple way to update my function to achieve this behavior?
Here is a codepen link with the code.

Example li Get started is feature.html and list Overview is index.html. What you can do is put the class current on list data-tab and article id tab-2 in feature.html anyways it will remove the class when you click the list overview.
$(document).ready(function() {
$('ul.tabs li').click(function() {
var tab_id = $(this).attr('data-tab');
$('ul.tabs li').removeClass('current');
$('.tab-content').removeClass('current');
$(this).addClass('current');
$("#" + tab_id).addClass('current');
})
});
.tab.current {
color: red;
}
.tab-content {
display: none;
}
.tab-content.current {
display: block;
}
li {
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="tab" data-tab="tab-1">Overview</li>
<li class="tab current" data-tab="tab-2">Get started</li>
</ul>
<article id="tab-1" class="tab-content">TAB 1</article>
<article id="tab-2" class="tab-content current">TAB 2</article>

how to make panels switch automatically

I made panels but i don't know how to make them switch automatically, i would appreciate if you help me.
js:
// akcii panels
$(".load-block:first").addClass('active');
$("#akciiContent li").click(function(event) {
event.preventDefault();
var elemId = $(this).attr("data-akcii");
$("#akciiContent li").removeClass("active");
$(".ak-block").removeClass("selected");
$(this).addClass("active");
$("#"+elemId).addClass("selected");
});
html:
<div class="row">
<div class="akcii-block-one">
<ul id="akciiContent">
<li data-akcii="block-three" class="load-block">
<p>Приведи друга</p>
<div class="loader"></div>
</li>
<li data-akcii="block-four" class="load-block">
<p>Установка центрального охранного прибора бесплатно</p>
<div class="loader"></div>
</li>
</ul>
</div>
<div class="akcii-block-two">
<div id="block-three" class="ak-block">
<img src="includes/icons/akcii-3.jpg">
</div>
<div id="block-four" class="ak-block">
<img src="includes/icons/akcii-4.jpg">
</div>
</div>
</div>

HTML markup
<div class="panels">
<ul>
<li class="active" data-panel="panel1">Tab 1</li>
<li data-panel="panel2">Tab 2</li>
<ul>
<div id="panel1" class="panel active">Panel 1 content</div>
<div id="panel2" class="panel">Panel 2 content</div>
</div>
Jquery function
$(document).ready(function(){
$('.panels ul li').on('click', function(){
if($(this).hasClass('.active')){
//ignore if its already active
return;
}
var active = $('.panels ul li.active, .panels .panel.active');
active.removeClass('active');
//set active tab
$(this).addClass('active');
//set attive panel
$('#' + $(this).attr('data-panel')).addClass('active');
});
});
CSS
.panels .panel{
display:none;
}
.panels .panel.active{
display:block;
}

Open and scroll to accordion section

I have a single page site with content placed inside an accordion. I need to both open and scroll to the accordion item when a user clicks on my nav at the top of the page. I found a couple similar functions, this being the closest (Open JQuery accordion when link with an id of element within the accordion is clicked) but unfortunately the jsfiddle links are no longer working.
Right now I just have thecode to get the accordion working...Need to get the scroll to part in there somehow...Thanks!
Code
var accordion_head = $('.accordion > li > .toggle-bar');
accordion_head.on('click', function (event) {
var $a = $(this);
event.preventDefault();
if ($a.hasClass('active')) {
$a.removeClass('active').siblings('.content-wrapper').slideUp();
}
else {
$a.addClass('active').siblings('.content-wrapper').slideDown();
}
});
.accordion li .content-wrapper {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="accordion">
<li id="1">
<a class="toggle-bar" href="#one"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="2">
<a class="toggle-bar" href="#two"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
<li id="3">
<a class="toggle-bar" href="#three"><h2>Headline</h2></a>
<div class="content-wrapper">
Content Here
</div>
</li>
</ul>