We Keep Coding

How to get ul inside an li

<li class="cate-item">
<button class="cate-label" >item 1 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label" >item 2 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
This li item is generated dynamically I want to toggle li on the cate-label button click. for that, I did the following code
$(document).on("click", "#categoryList > li .cate-label", function () {
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
}
);
when I try to hide item using ItemToHide.find(".sub-cate").hide(); it didn't hide anything . I tried to find the length of the item using ItemToHide.find(".sub-cate").length but it returned 0.

Lower your event handling to something closer. I wrapped everything in a <menu> tag and registered the click event to it instead of document. It doesn't make much of a difference performance wise but I suggest it because it's looks as if your perspective is skewed if dealing with a larger view of the DOM and you'll be error prone:
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
That nightmare is now:
$(this).next('.sub-categ').toggle('ease-out');
$('menu').on("click", ".cate-label", toggleList);
function toggleList(e) {
$(this).next('.sub-categ').toggle('ease-out');
};
<menu>
<li class="cate-item">
<button class="cate-label">item 1 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label">item 2 </button>
<ul class="sub-categ">
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
</menu>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Actually, the name of the class is not correct. Should be 'sub-cate', not 'sub-categ'.
$(document).on("click", "#categoryList > li .cate-label", function () {
var currentItem = $(this).closest("li");
ItemToHide = $("#categoryList > li").not(currentItem);
ItemToHide.removeClass("active-item");
ItemToHide.find(".sub-cate").hide();
currentItem.toggleClass("active-item");
});
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div id="categoryList">
<li class="cate-item">
<button class="cate-label" >item 1 </button>
<ul class="sub-cate"><!--rename the class name-->
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
<li class="cate-item">
<button class="cate-label" >item 2 </button>
<ul class="sub-cate"><!--rename the class name-->
<li> sub item 1</li>
<li> sub item 2</li>
<li> sub item 3</li>
<li> sub item 4</li>
</ul>
</li>
</div>

A simple vertica menu accordion JavaScript Jquery

I'm trying to make a simple accordion menu
When you click on the menu the submenus are shown:
When you click "A" or "B" or "C", your respective submenu will be displayed
If the submenu of the letter is open, the only way to close it is to click on the letter again
did not get the way to just apply the jquery to the clicked class
https://jsfiddle.net/mafervemg/g0rb9xL1/
$(document).ready(function () {
$(".submenu").slideDown(); // open web there all submenu close
$(".UP").click(function () {
$(".submenu").slideUp();
});
$(".DOWN").click(function () {
$(".submenu").slideDown();
});
});
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>A</li>
<li>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>B</li>
<li>
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>C</li>
<li>
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

You need to change a bit in your html and js
Have a look at Js below:
$(document).ready(function () {
$("submenu").slideDown(); // open web there all submenu close
$(".toggle").addClass('open');
$(".UP").click(function () {
$(".submenu").slideUp();
$(".toggle").removeClass('open');
});
$(".toggle").click(function(){
if($(this).hasClass("open")){
$(this).parent().find(".submenu").slideUp();
} else {
$(this).parent().find(".submenu").slideDown();
}
$(this).toggleClass('open');
})
$(".DOWN").click(function () {
$(".submenu").slideDown();
$(".toggle").addClass('open');
});
});
and change html
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li><a href="#" class='toggle'>A</a>
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li><a href="#" class='toggle'>B</a> <ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul></li>
<li><a href="#" class='toggle'>C</a> <ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul></li>
</ul>

Error:$ is not defined is because jQuery has not been included properly
<script type="text/javascript" src="https://code.jquery.com/jquery-1.7.1.min.js"></script>

I slightly changed your code, Hope you can understand
$(document).ready(function() {
$("submenu").slideDown(); // open web there all submenu close
$('.toggle-menu').addClass('opened');
$(".UP").click(function() {
$(".submenu").slideUp();
$('.toggle-menu').removeClass('opened').addClass('closed');
});
$(".DOWN").click(function() {
$(".submenu").slideDown();
$('.toggle-menu').removeClass('closed').addClass('opened');
});
$('.toggle-menu').click(function() {
if ($(this).hasClass('opened')) $(this).removeClass('opened').addClass('closed').siblings('.submenu').slideUp();
else $(this).removeClass('closed').addClass('opened').siblings('.submenu').slideDown();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="UP"> Click Here For Closet Sub Menu</p>
<p class="DOWN">Click Here For Open</p>
<ul class="menu">
<li>
A
<ul class="submenu">
<li>a 1</li>
<li>a 2</li>
<li>a 3</li>
<li>a 4</li>
</ul>
</li>
<li>
B
<ul class="submenu">
<li>b 1</li>
<li>b 2</li>
<li>b 3</li>
<li>b 4</li>
</ul>
</li>
<li>
C
<ul class="submenu">
<li>c 1</li>
<li>c 2</li>
<li>c 3</li>
<li>c 4</li>
</ul>
</li>
</ul>

Dropdown submenu issue

I´m having a problem with a Submenu.
I can SHOW the submenu (when I click on the Menu or Li > Text). For example, Show submenu when I click on ONE
Also, close the other submenu if the person click on other Menu (Li > Text). For example, if the submenu of ONE is open and I click on Two, the submenu of One gets closed.
But I can´t toggle with my current code to open/close the submenu. For example, if I click on One it shows the Submenu. But I want that If I click again on One, close the Submenu.
Anyone can help me?
Here is my code
<head><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".menu .expanded .menu ").hide();
$("li:has(ul)").click(function() {
$(".menu .expanded .menu ").hide();
$("ul", this).toggle('fast');
});
});
</script>
</head>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>
Thanks a lot! I am new :D

I only removed one line :
$(".menu .expanded .menu ").hide();
You can check if its the expected behavior in my snippet
$(document).ready(function() {
var previousTarget = null;
$("ul", "li").toggle('fast');
$("li:has(ul)").click(function() {
$(".menu .expanded .menu").hide('fast');
if (this === previousTarget && $(this).children().css('display')!='none') {
$(this).children().hide('fast');
} else {
$(this).children().show('fast');
}
previousTarget = this;
return false;
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<ul class="menu">
<li class="expanded">One
<ul class="menu">
<li>One 1</li>
<li>One 2</li>
<li>One 3</li>
<li>One 4</li>
</ul>
</li>
<li class="expanded">Two
<ul class="menu">
<li>Two 1</li>
<li>Two 2</li>
<li>Two 3</li>
<li>Two 4</li>
</ul>
</li>
<li class="expanded">Three
<ul class="menu">
<li>Three 1</li>
<li>Three 2</li>
<li>Three 3</li>
<li>Three 4</li>
</ul>
</li>
</ul>
</body>

Hide/show li items based on the category filter clicked

I have a list of li items whose categories have been added to the class. 1 means it is associated with that category, 0 means it is not. When first visiting the page, they will all appear "View All". Clicking "Fruits" will show all items that have "fruits-1" in them. Clicking "View All" will show ALL items.
Filter by:
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul>
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>
What should I do to these items (add classes or ID's or whatever) to make it so when I click a category, only the ones that belong to that category appear? and the rest are hidden?

Try this : you can use text of clicked anchor to find matching categories and show them. see below code
$(function(){
$('ul li a').click(function(e){
e.preventDefault();
var category = $(this).text().toLowerCase().split("&");
if(category[0]=="view all")
{
$('ul.category li').show();
}
else
{
//hide all categories
$('ul.category li').hide();
$.each(category, function(i, v){
$('ul.category li.'+v.trim()+"-1").show();
});
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li>View All</li>
<li>Fruits</li>
<li>Vegetables</li>
<li>Nuts</li>
<li>Desserts & Cakes</li>
</ul>
<ul class="category">
<li class="fruits-1 nuts-0 vegetables-1 desserts-1">Product 1</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-1">Product 2</li>
<li class="fruits-1 nuts-1 vegetables-1 desserts-0">Product 3</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 4</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 5</li>
<li class="fruits-0 nuts-1 vegetables-0 desserts-0">Product 6</li>
<li class="fruits-0 nuts-0 vegetables-0 desserts-1">Product 7</li>
<li class="fruits-1 nuts-0 vegetables-1 desserts-0">Product 8</li>
</ul>

$('.links li a').on('click',function(e){
e.preventDefault();
var className = $(this).text().toLowerCase();
$(".content li").not('.' + className).hide();
$(".content li" + "." + className).show();
})
.content li{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul class="links">
<li>Fruit </li>
<li>Veg </li>
<li>Nuts</li>
<li>Drinks</li>
</ul>
<ul class="content">
<li class="fruit veg nuts drinks">Product 1</li>
<li class="drinks">Product 2</li>
<li class="veg nuts drinks">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>

Let say you have this
<ul class="listed-values">
<li class="fruit,veg,nuts,drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg,nuts,drink">Product 3</li>
<li class="veg,nuts">Product 4</li>
</ul>
and this one
<ul class="filter-ul">
<li>Fruit</li>
<li>Veg</li>
<li>Nuts</li>
<li>Drink</li>
</ul>
Here is jquery code
$(document).ready(function(){
$(".filter-ul li a").click(function(){
var text = $(this).text().toLowerCase();
$('ul.listed-values li').hide();
$('ul.listed-values li').filter(function(){
return $(this).attr('class').indexOf(text) != -1;
}).show();
})
})

Add a data-category attribute to each filter to indicate which category it should display. Then use that in a selector to match the class of the products.
The proper way to separate multiple classes is with spaces, not commas.
$("#filters a").click(function() {
var category = $(this).data("category");
$("#products li").hide();
$("#products li." + category).show();
return false;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
Filter by:
<ul id="filters">
<li>Fruit
</li>
<li>Veg
</li>
<li>Nuts
</li>
<li>Drinks
</li>
</ul>

In html classes are separated with spaces not with comma.
html code:
<ul class="products">
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li><a href="" class='category'>Fruit</a></li>
<li><a href="" class='category'>Veg</a></li>
<li><a href="" class='category'>Nuts</a></li>
<li><a href="" class='category'>Drinks</a></li>
</ul>
JS Code:
$(function() {
$(".category").on("click", function(e) {
e.preventDefault();
var products = $(".products").find("li");
products.show();
var cat = $(this).text();
products.not('.'+cat.toLowerCase()).hide();
});
});
You can find the working demo here : http://jsfiddle.net/crL054px/

Try this
JS Fiddle is here http://jsfiddle.net/cfzdq7f7/
HTML
<ul>
<li class="fruit veg nuts drink">Product 1</li>
<li class="drink">Product 2</li>
<li class="veg nuts drink">Product 3</li>
<li class="veg nuts">Product 4</li>
</ul>
<ul>
<li class="category">Fruit</li>
<li class="category">Veg</li>
<li class="category">Nuts</li>
<li class="category">Drinks</li>
</ul>
Javascript
$(document).ready(function() {
$(".category").click(function() {
if($(this).html() == "Fruit") {
$(".veg").hide();
$(".nuts").hide();
$(".drink").hide();
$(".fruit").show();
} else if($(this).html() == "Veg") {
$(".fruit").hide();
$(".nuts").hide();
$(".drink").hide();
$(".veg").show();
} else if($(this).html() == "Nuts") {
$(".fruit").hide();
$(".veg").hide();
$(".drink").hide();
$(".nuts").show();
} else if($(this).html() == "Drinks") {
$(".fruit").hide();
$(".nuts").hide();
$(".veg").hide();
$(".drink").show();
}
});
});
CSS
.fruit, .veg, .nuts, .drink {
display:none;
}
.category {
cursor:pointer;
}
Let me know if it is helpful

How to retrieve id value in Kendo menu

I am using Kendo menu in my project. I want to retrieve id value when I click on the selected item. I used onSelect event and I am able to retrieve the selected item Text. How can I retrieve the id value?

You can use HTML5 data atrributes to accomplish this.
HTML
<div id="example" class="k-content">
<ul id="menu">
<li>
First Item
<ul>
<li data-id="12345">Sub Item 1 with ID</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>
</div>
And the Javascript:
<script>
$(document).ready(function() {
function onSelect(e) {
var id = $(e.item).attr('data-id');
}
$("#menu").kendoMenu({
select: onSelect
});
});
</script>

You can set an ID in the UL/LI structure from which you initialize it (check the Robotsushi's answer). However if you want to initialize the menu dynamically you can use something like this - http://jsfiddle.net/MMRCf/8/