Develop Reference

Add class to element when clicked elsewhere + condition on class presence

I'm having a sliding menu with sub-menus. I'm trying to hide an element in the navigation row when a user clicks one of the parent menu item that has a sub-menu (clicks on the expand arrow) + I want to show back the hidden element when the users clicks back to the top-level menu.
My menu's <ul> element get's a class of slide-menu-is-active-parent when any of the sub-menus is open.
This is a simple version of my row html:
<div class="navigation row">
<nav>
<ul id="nav-menu">
<li>Menu item 1</li>
<span class="submenu-button">
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li>Menu item 2</li>
<span class="submenu-button">
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content-row">
[whatever content...]
</div>
I tried the following script to add a class od menu-open to the some-content element when both conditions are met: the user clicks on the sub-menu button and when the <ul id="nav-menu"> element get's the slide-menu-is-active-parent class when opened. And with the class added to my content row, I could use simple .content-row.menu-open{display:none} to hide it.
function($) {
$("#nav-menu .submenu-button").click(function(){
if ($('#nav-menu').hasClass('slide-menu-is-active-parent')) {
$('.content-row').addClass('menu-open');
} else {
$('.content-row').removeClass('menu-open');
}
});
});
But that doesn't work. Any tips on where my script is lacking?

To be honest, your code works: just add the slide-menu-is-active-parent class to the #nav-menu, and the content-row shows up on click. Still, I would do this differently - even if using jQuery. Here's a simplistic solution:
jQuery(document).ready(function($) {
// this click handler opens the sub-menu
$(".menu-item").on('click', function() {
$(this).find(".sub-menu").toggle()
})
// this click handler toggles the content-row
$(".sub-menu > li").on('click', function(e) {
// stopPropagation prevents the click event
// to bubble up to the menu-item parent
e.stopPropagation()
$(".content-row").toggle()
})
})
.d-none {
display: none;
}
.menu-item,
.sub-menu>li {
cursor: pointer;
}
.content-row {}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation row">
<nav>
<ul id="nav-menu">
<li class="menu-item">Menu item 1
<ul class="sub-menu d-none">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
<li class="menu-item">Menu item 2
<ul class="sub-menu d-none">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</li>
</ul>
</nav>
</div>
<div class="content-row d-none">
[whatever content...]
</div>

You need to use $(this) to refer to the element you clicked.
You also need to find parent with class, so you can use parents() with the name of your class.
NOTE : if i solved your problem, please next time do effort to make your question more clear, it will be better for everyone :)
$("#nav-menu .submenu-button").click(function(){
if ($(this).parents('#nav-menu').hasClass('slide-menu-is-active-parent')) {
$('.content-row').addClass('menu-open');
} else {
$('.content-row').removeClass('menu-open');
}
});
.content-row { display:none }
.menu-open { display:block }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="navigation row">
<nav>
<ul id="nav-menu" class="slide-menu-is-active-parent">
<li>Menu item 1</li>
<span class="submenu-button">Button</span>
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
<li>Menu item 2</li>
<span class="submenu-button">Button</span>
<ul class="sub-menu">
<li>Sub-menu item 1</li>
<li>Sub-menu item 2</li>
<li>Sub-menu item 3</li>
</ul>
</ul>
</nav>
</div>
<div class="content-row">
[whatever content...]
</div>

Make parent link unclickable in submenu toggle

I am trying to make a sub-menu toggle on mobile but it keeps on redirecting to the parent menu link and adding event.preventDefault(); making entire sub-menu links unclickable. Any idea how to make only first .has-childern a link unclickable?
Markup
<div class="menu-container">
<ul class="nav-menu">
<li class="menu item"> Home </li>
<li class="menu-item has-childern"> About
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu-item has-childern"> Services
<ul class="submenu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</li>
<li class="menu item"> Contact </li>
</ul>
</div>
jQuery
jQuery(document).ready(function(){
jQuery('.menu-container .submenu').hide();
jQuery('.menu-container .has-childern a').click(function() {
event.preventDefault();
jQuery(this).parent().children('.submenu').toggle();
});
});
JsFiddle https://jsfiddle.net/p5fLsvcq/

You code affect all nested children instead just direct child
use '>' for select just a direct first level child in selector:
jQuery('.menu-container .has-childern > a').click(/*...*/)

JQUERY - toggle divs based on ID

I have a large number of DIVs on a page. Each being a container for an Unordered List. Above each DIV is a header text which consists of an element with an anchor.
e.g.
<h2><a id="header1" href="#" > Header 1 </a></h3>
<div id="container1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2><a id="header2" href="#" > Header 2 </a></h3>
<div <div id="container2">>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
I need to have all these DIVs hidden until the header (anchor) is clicked. If the user clicks header it should toggle show/hide DIV
How can I accomplish this in JQUERY in a way that I can have one onClick function for all the DIVS, possibly using an id to differentiate between divs?
<h2> Header 1 </h3>
function toggleDiv(id) {
}
but in JQUERY ?
SOLVED!!!!
<script>
$(function(){
$('.toggle-link').on('click', function() {
var linkId = $(this).attr('data-div-id');
$('#' + linkId).toggle();
});
});
</script>
<h2> Header 1 </h2>
<div id="div1">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<h2> Header 2 </h2>
<div id="div2">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>

You can use .toggle() in jQuery
toggle() method toggles between hide() and show() for the selected
elements.
function toggleDiv(id) {
$('#'+id).toggle();
}
where id is the parameter you pass

List order rearrangement using jquery

Can anyone please help me on this problem.
I have a list order like:
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>
I want this like :
<ul>
<li class="parent">Parent item 1</li>
<div>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
</div>
<li class="parent">Parent item 2</li>
<div>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
</div>
<li class="parent">Parent item 3</li>
<div>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</div>
</ul>
is this possible to make it using jQuery?
Thanks in Advance.

If you are able to accept a semantically correct nested list, you could achieve that by using jQuery to loop through each .parent element and select each item after it until it hits the next .parent item using nextUntil(). Then, you create a new <ul> and append those children to it and then append the new <ul> to the parent <li>.
// Select all of the .parents and loop through them.
$('.parent').each(function() {
// Select all the following siblings starting from this .parent element until you reach the next .parent element.
var $children = $(this).nextUntil('.parent');
// Take the results and append them to a new ul element and then append that ul element to the current .parent li element.
$children.appendTo($('<ul>').appendTo($(this)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
<li class="parent">Parent item 1</li>
<li class="no-parent">item 1</li>
<li class="no-parent">item 2</li>
<li class="parent">Parent item 2</li>
<li class="no-parent">item 3</li>
<li class="no-parent">item 4</li>
<li class="no-parent">item 5</li>
<li class="parent">Parent item 3</li>
<li class="no-parent">item 6</li>
<li class="no-parent">item 7</li>
</ul>

How to have KendoPanel's all the sections expand

I just started using KendoPanel and I am wanting to expand all the segments of the panel under certain condition. I am using following code to achieve that:
var panelbar = $("#KendoPanel").kendoPanelBar();
var kendoPanelbar = panelbar.data().kendoPanelBar;
kendoPanelbar.collapse($("li", panelbar.element));
Seems like it is contracting all the segments instead of expanding them. What am I doing wrong?

Please try with below code snippet.
<ul id="mypanelbar">
<li class="k-state-active">First Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Second Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Third Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fourth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Fifth Item
<ul>
<li>Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
</ul>
<script>
var panelBar;
$(document).ready(function () {
panelBar = $("#mypanelbar").kendoPanelBar().data("kendoPanelBar");
// Expand all item
panelBar.expand($("#mypanelbar li.k-item"));
});
</script>
Let me know if any concern.