We Keep Coding

I want to do 'slide up' when the 'slide menu' is focused out

I try to 'slide up' when I focus out of the asmenu class. However, if you select two (2) checkboxes of child element in the asmenu class, the focusout is executed.
Basically, once you select one (1) checkbox of child element in the asmenu class, 'slide up' function is already ready to executed. So that when I try to select the 2nd one after I select the 1st one, it automatically focus out.
I would like to select multiple checkboxes and only 'slide up' when I focus out of the asmenu class.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="create_category">
<div class="abmenu">
<em>category</em>
<div class="arrowbox">
<span class="arrow_open"><i class="f0">open</i></span>
<span class="arrow_close"><i class="f0">close</i></span>
</div>
</div>
<div class="asmenu">
<ul>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate1" name="chk" value="POP">
<label for="asidecate1">POP</label>
</a>
</li>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate2" name="chk" value="ROCK">
<label for="asidecate2">ROCK</label>
</a>
</li>
<li>
<a class="checkaside">
<input type="checkbox" id="asidecate2" name="chk" value="R&B">
<label for="asidecate2">R&B</label>
</a>
</li>
</ul>
</div>
</div>
$(".create_category .abmenu").on('click', function () {
$(this).next(".asmenu").stop().slideToggle(300);
$(this).toggleClass('on');
});
$(".create_category .asmenu").on('focusout', function (e) {
$(".create_category .asmenu").slideUp(300);
$(".create_category .abmenu").removeClass('on');
});

Just use the below code and remove yours it works perfectly. I have used stopPropagation this method prevents the propagation of the same event from being called
Also when you click on the document ".asmenu" will focus out.
$(".create_category .abmenu").on('click', function () {
$(this).next(".asmenu").stop().slideToggle(300);
$(this).toggleClass('on');
});
/* $(".create_category .asmenu").on('focusout', function (e) {
$(".create_category .asmenu").slideUp(300);
$(".create_category .abmenu").removeClass('on');
}); */
$(document).on("click", function () {
$(".create_category .asmenu").slideUp(300);
$(".create_category .abmenu").removeClass('on');
});
$('.create_category').on('click', function (e) {
e.stopPropagation();
});

Remove and re-add Class Attribute inside a <div> unordered list item

This is the answer as i was able to solve.
Wanted to change the css class="jsTree-clicked" after the button click event happened from Hyperlink1 to Hyperlink3.
$(document).ready(function () {
//remove Class
$('#myJSTree').find('.jsTree-clicked').removeClass('jsTree-clicked');
//need to do add it to List Item which has Id =3
//check the list item which has id =3 if so add the class to it
// It is not a button click event.
$('#myJSTree li').each(function (i, li) {
console.log('<li> id =' + $(li).attr('id'));
var myIdVal = $(li).attr('id');
if (myIdVal == 3) {
$(this).addClass('jsTree-clicked');
}
});
});
.jsTree-clicked { background-color:red;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a class="jsTree-clicked" title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
When the Hyperlink is clicked the JsTree adds a class="jsTree-clicked" . When you navigate to a different node it will remove and re-add the same class to the navigated node.
Expected
I want a function to remove [class="jsTree-clicked"] for the given List Item based on ID inside the div.
AND
Re-add [class="jsTree-clicked"] to any ListItem by passing the Key i.e ID .
I hope I was able to explain my problem.
Thank you
My JSTree is a third party open source.

$('.nav-list').on('click', 'li', function() {
$('.nav-list li.active').removeClass('active');
$(this).addClass('active');
});
.active{
background-color:red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="myJSTree">
<ul class="nav nav-list">
<li id="1">
<a title="Hyperlink1">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>

Maybe this is helpful to you?
$(function () { $('#myJSTree').jstree(); });
const toggle = (e) => {
if (+$("#test").val()>=10 ) {
e.target.classList.remove("jstree-clicked");
console.log("You entered an invalid number.")
}
console.log(e.target)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" onclick="toggle(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10
I have simply included a rudimentary toggle() function to demonstrate the point of removing and ading the class name "jsTree-clicked". Please note that JStree assigns other classes to the node dynamically that should be kept there.
It appears to me as if the class jstree-clicked (not: jsTree-clicked) is set by JSTree after an element was clicked. You might have to play aroud with this further to get what you want.
The following might be more what you want. It will "link" to the given href only when the predefined test criteria in checkinput() is met:
$(function () { $('#myJSTree').jstree(); });
const checkinput = (e) => {
if (+$("#test").val()>=10 ) {
console.log("You entered an invalid number.")
} else document.location.href=e.target.href;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<div id="myJSTree">
<ul>
<li id="1">
<a title="Hyperlink1" href="https://jsonplaceholder.typicode.com/users/1" onclick="checkinput(event)">HyperLink1</a>
</li>
<li id="2">
<a title="Hyperlink2" href="https://jsonplaceholder.typicode.com/users/2">HyperLink2</a>
</li>
<li id="3">
<a title="Hyperlink3">HyperLink3</a>
</li>
</ul>
</div>
<input type="text" value="3" id="test"> < 10<br>
HyperLink1 will link to the page "user1" if the input is valid, <br>otherwise an eror will be shown in the console.

Toggle and Hide Login form when users click anywhere using jquery

So I have a Login form within a li tag.
HTML
<div class='container'>
<ul class="pull-right">
<li>A</li>
<li>E</li>
<li>Login
<div class="eagle form">
<form>
...
</form>
</div>
</li>
</ul>
</div>
I want to show() the form when users click on login, and hide()the form when users click elsewhere, using jquery.
I use this jquery code after read this answer: How to hide ul using jquery when users click elsewhere
JS
$(function () {
var sesion = $('.eagle.form');
$('.lion').on('click', function (e) {
e.stopPropagation();
sesion.toggle();
});
$(document).on('click', function (e) {
sesion.toggle();
});
});
However, when login form shows up and I want to interact with the fields on it, it hides again.
How can I fix the code? I think I'm missing one line.
Any suggestions to solve the problem are appreacited!

Demo
HTML:
<ul>
<li>
test
</li>
<div class="meh">
<li> Form
<ul class="form">
<li>
<form>
<input type="text" />
<input type="submit" />
</form>
</li>
</ul>
</li>
</div>
</ul>
Js:
$(".form").hide();
$(".toggleForm").click(function() {
$(".form").toggle();
});
$(document).on("click", function(e) {
if ($(e.target).closest(".meh").length == 0) {
$(".form").hide();
}
});
Is this what you're looking for?

Using the solution from this question: Use jQuery to hide a DIV when the user clicks outside of it
$(document).mouseup(function (e) {
var container = $('.form');
if (!container.is(e.target)
&& container.has(e.target).length === 0) {
container.hide();
}
$('HERE-GOES-li-CONTAINER').click( function(event) {
$('.form').toggle();
});
});

Checking all immediate child checkboxes onclicking parent checkbox using JQuery

I have a list in my html code where onclick of parent checkbox, the immediate child checkboxes should be checked.
<ul class="test_ex">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Fruits</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Apple </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Orange </a>
</li>
</ul>
<ul class="test_ex_sample">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref">Birds</a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref"> Peacock </a>
</li>
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Parrot </a>
</li>
</ul>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="parent" onchange="fnTest(this);" /> <a class="ref"> Food </a>
<ul class="example">
<li>
<input type="checkbox" id="chckBox" class="child" /> <a class="ref">Bread </a>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I tried many ways to check only the immediate children. But none of them worked.
These are few ways:
Tried using .siblings() [Found this solution on stackoverflow only]
function fnTest(check) {
if ($(check).is(':checked')) {
$(check).siblings('.example').find('.child').attr("checked", true);
} else {
$(check).siblings('.example').find('.child').attr("checked", false);
}
}
Fiddle demo 1
Here the first list works properly. Again when clicked on second list it checks the 3rd list children too.
Secondly tried this set of code
Tried using the class which is checked annd getting children from that class. This checks all parents that belong to that class.
Fiddle demo 2
function fnTest(check) {
if ($(check).is(':checked')) {
var classParent = "." + $(check).attr('class');
$(classParent).attr("checked", true);
}
}
It would be great if someone could point out my mistake.

From your first try of using siblings(). You can change to the following:
function fnTest(check){
if($(check).is(':checked')){
$(check).siblings('.example:first').find('.child').prop("checked",true);
}
else{
$(check).siblings('.example:first').find('.child').prop("checked",false);
}
}
By using this it checks only the first children. And also change your .attr to .prop
here is a demo : Fiddle

You can do this by using jQuery. First of all remove onchange="fnTest(this);" from parent checkbox. Bind change event for parent checkbox like below :
$(function(){
$('.parent').click(function(){
$(this).parent().find('.example:first .child').prop('checked',$(this).is(':checked'));
});
});
Demo

try
function fnTest(check) {
$(check).closest("ul").find(":checkbox").prop("checked",check.checked);
}
DEMO
If you want only direct children use like this
function fnTest(check) {
$(check).closest("li").find(".example:first").find(":checkbox").prop("checked", check.checked);
}
DEMO
NOTE : use latest version in jquery, and also id should be unique

// OK tested
$(document).ready(function(e) {
$('input[type=checkbox]').click(function () {
$(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
var sibs = false;
$(this).closest('ul').children('li').each(function () {
if($('input[type=checkbox]', this).is(':checked')) sibs=true;
})
$(this).parents('ul').prev().prop('checked', sibs);
});});

Javascript, Toggle, Slide

http://jsfiddle.net/Z9zD8/271/
$(function()
{
$('#toggle1').click(function() {
$('.toggle1').toggle();
return false;
});
$('#toggle2').click(function() {
$('.toggle2').toggle();
return false;
});
$('#toggle3').click(function() {
$('.toggle3').toggle();
return false;
});
$('#toggle4').click(function() {
$('.toggle4').toggle();
return false;
});
});
I would like, which is always open just a Slider.
Say: I have Slider 1 open. When I open Slider 2, then close Slider 1
.
It should always be open only a Slider
I hope you can help me
thank you

The boxes [.toggle1, .toggle2, .toggle3, ..] should have one one class like '.toggle', and remove [#toggle1, #toggle2, #toggle3, ..] on link elements, and try this jQuery code:
$(function() {
$('a').on('click', function(e) {
e.preventDefault();
$('.toggle').slideUp();
$(this).next().next().next('.toggle').slideDown();
});
});
Your html code:
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>
Simple Div Toggle<br /><br />
<div class="toggle" style="display:none; background-color:#4CF;width:100px;height:100px;"></div>

just use this jquery code:
Fiddle DEMO
$("a[id^='toggle']").click(function(){
$('div[class^="toggle"]').slideUp(500);
$("."+$(this).attr("id")).slideToggle(500);
});

Have you looked at the Jquery UI accordion
Accordian
I think you want this behaviour

You might want something like so:
enter link description here
$(function () {
$(".flyout").siblings("span").click(function () {
$(".flyout").slideUp(200, function() {
$(this).siblings(".flyout").toggle(500);
});
$(this).siblings(".flyout").toggle(500);
});
});
<ul>
<li ><span id="europe">Europe</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
<li ><span id="europe">Asia</span>
<div class="flyout">
<ul>
<li>item 1</li>
</ul>
</div>
</li>
</ul>
.flyout {display: none}