Develop Reference

Click is working on each nested child, how to click only closest child using jquery?

I have nested div with same class now i want to access only closest child how can i do that?
My Code:-
$('.cat-item').click(function() {
$(this).find('.sub-menu').toggle();
});
.sub-menu{ display:none;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="category-menu">
<li class="cat-item">
Food Service Disposables
<ul class="sub-menu">
<li class="cat-item">Healthcare & Medical
<ul class="sub-menu">
<li class="cat-item">Food Service Disposables</li>
<li class="cat-item">Healthcare & Medical
<ul class="sub-menu">
<li class="cat-item">Healthcare & Medical</li>
<li class="cat-item">Food Service Disposables</li>
<li class="cat-item">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item has-children">Food Service Disposables</li>
<li class="cat-item has-children">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item has-children">
Healthcare & Medical
</li>
<li class="cat-item has-children">
Hygiene & Cleaning
<ul class="sub-menu">
<li class="cat-item has-children">Healthcare & Medical</li>
<li class="cat-item has-children">Food Service Disposables</li>
<li class="cat-item has-children">Hygiene & Cleaning</li>
</ul>
</li>
</ul>
Thanks for your Efforts!

You can target the a tag selector using $('.cat-item a') for the click as each of your nested list items parent has an a tag for the clickable element as its first child element and then use $(this).next().toggle('sub-menu').
$('.cat-item a').click(function() {
$(this).next().toggle('sub-menu')
})
.sub-menu {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="category-menu">
<li class="cat-item">
Food Service Disposables
<ul class="sub-menu">
<li class="cat-item">Healthcare & Medical
<ul class="sub-menu">
<li class="cat-item">Food Service Disposables</li>
<li class="cat-item">Healthcare & Medical
<ul class="sub-menu">
<li class="cat-item">Healthcare & Medical</li>
<li class="cat-item">Food Service Disposables</li>
<li class="cat-item">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item has-children">Food Service Disposables</li>
<li class="cat-item has-children">Hygiene & Cleaning</li>
</ul>
</li>
<li class="cat-item has-children">
Healthcare & Medical
</li>
<li class="cat-item has-children">
Hygiene & Cleaning
<ul class="sub-menu">
<li class="cat-item has-children">Healthcare & Medical</li>
<li class="cat-item has-children">Food Service Disposables</li>
<li class="cat-item has-children">Hygiene & Cleaning</li>
</ul>
</li>
</ul>

How to recursively add id tag using jQuery to ul & li elements, according to their depth within the list?

How to give unique id attributes and reflect the same within all ul li elements according to their depth/level within the parent list.
first ul should have id="u1"
first li within that ul should have id="u1l1"
next li within that ul should have id="u1l2"
next li within that ul should have id="u1l3"
ul within that should have id="u1l3-u1"
next ul within that should have id="u1l3-u2"
li within that should have id="u1l3-u2l1"
next li should have id="u1l3-u2l2"
and so on...
To make things clearer, here's a sample code that I generated using a spreadsheet program...
For example the following code:
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
should become:
<div id="listz">
<ul id="u1">
<li id="u1l1"><span>Stationary</span>
<ul id="u1l1-u1">
<li id="u1l1-u1l1">Books
<ul id="u1l1-u1l1-u1">
<li id="u1l1-u1l1-u1l1">Ruled Books</li>
<li id="u1l1-u1l1-u1l2">Unruled Books</li>
<li id="u1l1-u1l1-u1l3"><span>Graph Books</span>
<ul id="u1l1-u1l1-u1l3-u1">
<li id="u1l1-u1l1-u1l3-u1l1">Cartesian Graphs</li>
<li id="u1l1-u1l1-u1l3-u1l2">Isometric Graphs</li>
<li id="u1l1-u1l1-u1l3-u1l3">Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li id="u1l1-u1l2"><span>Pens</span>
<ul id="u1l1-u1l2-u1">
<li id="u1l1-u1l2-u1l1">Ball Pens</li>
<li id="u1l1-u1l2-u1l2">Fountain Pens</li>
</ul>
</li>
<li id="u1l1-u1l3">Eraser</li>
<li id="u1l1-u1l4">Paper Weight</li>
</ul>
</li>
<li id="u1l2">Furniture</li>
<li id="u1l3"><span>Colors</span>
<ul id="u1l3-u1">
<li id="u1l3-u1l1"><span>Primary Colors</span>
<ul id="u1l3-u1l1-u1">
<li id="u1l3-u1l1-u1l1">Yellow</li>
<li id="u1l3-u1l1-u1l2"><span>Red</span>
<ul id="u1l3-u1l1-u1l2-u1">
<li id="u1l3-u1l1-u1l2-u1l1">Red</li>
<li id="u1l3-u1l1-u1l2-u1l2">Fire Brick</li>
<li id="u1l3-u1l1-u1l2-u1l3"><span>Salmon</span>
<ul id="u1l3-u1l1-u1l2-u1l3-u1">
<li id="u1l3-u1l1-u1l2-u1l3-u1l1">Dark Salmon</li>
<li id="u1l3-u1l1-u1l2-u1l3-u1l2">Light Salmon</li>
<li id="u1l3-u1l1-u1l2-u1l3-u1l3">Salmon</li>
</ul>
</li>
<li id="u1l3-u1l1-u1l2-u1l4">Coral</li>
<li id="u1l3-u1l1-u1l2-u1l5">Crimson</li>
</ul>
</li>
<li id="u1l3-u1l1-u1l3">Blue</li>
</ul>
<li id="u1l3-u1l2"><span>Secondary Colors</span>
<ul id="u1l3-u1l2-u1">
<li id="u1l3-u1l2-u1l1">Orange</li>
<li id="u1l3-u1l2-u1l2">Green</li>
<li id="u1l3-u1l2-u1l3">Purple</li>
</ul>
</li>
<li id="u1l3-u1l3"><span>Earth Colors</span>
<ul id="u1l3-u1l3-u1">
<li id="u1l3-u1l3-u1l1">White</li>
<li id="u1l3-u1l3-u1l2">Black</li>
<li id="u1l3-u1l3-u1l3">Gray</li>
</ul>
</li>
</ul>
</li>
<li id="u1l4">foo</li>
<li id="u1l3">bar</li>
<li>foo fighters</li>
Here's what I've tried:
$("ul").each(function (i)
{
$(this).attr("id","u"+(i+1));
$(this).prepend("<span>u"+(i+1)+"</span>");
$("li", this).each(function (j)
{
$(this).attr("id","l"+(j+1));
$(this).prepend("<span>l"+(j+1)+"</span>");
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
</div>

You can try this function
addIdPartial('', $('#listz'));
function addIdPartial(id, li) {
if ($(li).find('> ul > li').length) {
$(li).find('> ul > li').each(function(i, v) {
pid = id + '-u1'
if(id == '') pid = 'u1';
$(this).parent().attr('id', pid);
var lid = pid + 'l' + (i+1);
$(this).attr('id', lid);
addIdPartial(lid, this);
})
}
}
ul:before, li:before {
content: attr(id);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="listz">
<ul>
<li><span>Colors</span>
<ul>
<li><span>Primary Colors</span>
<ul>
<li>Yellow</li>
<li><span>Red</span>
<ul>
<li>Red</li>
<li>Fire Brick</li>
<li><span>Salmon</span>
<ul>
<li>Dark Salmon</li>
<li>Light Salmon</li>
<li>Salmon</li>
</ul>
</li>
<li>Coral</li>
<li>Crimson</li>
</ul>
</li>
<li>Blue</li>
</ul>
<li><span>Secondary Colors</span>
<ul>
<li>Orange</li>
<li>Green</li>
<li>Purple</li>
</ul>
</li>
<li><span>Earth Colors</span>
<ul>
<li>White</li>
<li>Black</li>
<li>Gray</li>
</ul>
</li>
</ul>
</li>
<li><span>Stationary</span>
<ul>
<li>Books
<ul>
<li>Ruled Books</li>
<li>Unruled Books</li>
<li><span>Graph Books</span>
<ul>
<li>Cartesian Graphs</li>
<li>Isometric Graphs</li>
<li>Logarithmic Graphs</li>
</ul>
</li>
</ul>
</li>
<li><span>Pens</span>
<ul>
<li>Ball Pens</li>
<li>Fountain Pens</li>
</ul>
</li>
<li>Eraser</li>
<li>Paper Weight</li>
</ul>
</li>
<li>Furniture</li>
<li>foo</li>
<li>bar</li>
<li>foo fighters</li>
</ul>
</div>

Expand programmatically unwrongest accordion

I'm trying to expand programmatically an accordion menu based on saved values in local-storage.
The problem is that it saves the values, i get back the values, but it's not expanding the active ones.
I use the following accordion library:
(function(jQuery){
jQuery.fn.extend({
accordion: function() {
return this.each(function() {
var $ul = $(this);
if($ul.data('accordiated'))
return false;
$.each($ul.find('ul, li>div'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($ul.find('a'), function(){
$(this).click(function(e){
activate(this);
return void(0);
});
});
var active = (location.hash)?$(this).find('a[href=' + location.hash + ']')[0]:'';
if(active){
activate(active, 'toggle');
$(active).parents().show();
}
function activate(el,effect){
$(el).parent('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
My HTML (i generate the menu from C#) + JS: Init that gets the menus/submenus that i clicked earlier (but not expanding them :o( ):
<!--MENU-->
<div id="pageWrap" class="pageWrap">
<div class="pageContent">
<ul class="accordion">
<div id="menucontent">
<li id="top1">ACCESORII
<ul>
<li id="mid11">ACCESORII PENTRU LANTERNE
<ul>
<li id="sub111"><a href='category.aspx?id=72'>accesorii pentru lanterne portabile</a>
</li>
</ul>
<ul>
<li id="sub112"><a href='category.aspx?id=77'>accesorii pentru lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid12">BECURI DE REZERVA
<ul>
<li id="sub121"><a href='category.aspx?id=67'>becuri de rezerva ambalate individual</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid13">PENTRU CALATORII
<ul>
<li id="sub131"><a href='category.aspx?id=75'>accesorii pentru calatorii</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid14">PENTRU CALCULATOARE, JOCURI SI MUZICA
<ul>
<li id="sub141"><a href='category.aspx?id=79'>pentru calculatoare, jocuri si muzica</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top2">ACUMULATORI
<ul>
<li id="mid21">ACUMULATORI CU TEHNOLOGIA maxE (fara auto-descarcare)
<ul>
<li id="sub211"><a href='category.aspx?id=80'>MARIMEA R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub212"><a href='category.aspx?id=81'>MARIMEA R6 (AA)</a>
</li>
</ul>
<ul>
<li id="sub213"><a href='category.aspx?id=82'>MARIMEA R14 (C)</a>
</li>
</ul>
<ul>
<li id="sub214"><a href='category.aspx?id=83'>MARIMEA R20 (D)</a>
</li>
</ul>
<ul>
<li id="sub215"><a href='category.aspx?id=84'>ACUMULATORI DE 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid22">ACUMULATORI NiMH
<ul>
<li id="sub221"><a href='category.aspx?id=12'>ACUMULATORI MARIMEA R3 (Micro AAA)</a>
</li>
</ul>
<ul>
<li id="sub222"><a href='category.aspx?id=13'>ACUMULATORI MARIMEA R6 (Mignon AA)</a>
</li>
</ul>
<ul>
<li id="sub223"><a href='category.aspx?id=14'>ACUMULATORI MARIMEA R14 (Baby C)</a>
</li>
</ul>
<ul>
<li id="sub224"><a href='category.aspx?id=15'>ACUMULATORI MARIMEA R20 (Mono D)</a>
</li>
</ul>
<ul>
<li id="sub225"><a href='category.aspx?id=16'>ACUMULATORI MARIMEA 9V</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid23">ACUMULATORI PENTRU TELEFOANE DECT
<ul>
<li id="sub231"><a href='category.aspx?id=85'>Marimea R3 (AAA)</a>
</li>
</ul>
<ul>
<li id="sub232"><a href='category.aspx?id=86'>Marimea R6 (AA)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid24">AUMULATORI Ni-Zn
<ul>
<li id="sub241"><a href='category.aspx?id=96'>ACUMULATORI Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid25">EXTERN
<ul>
<li id="sub251"><a href='category.aspx?id=89'>PowerBank</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid26">HyCell
<ul>
<li id="sub261"><a href='category.aspx?id=91'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid27">PLUMB-GEL RITAR
<ul>
<li id="sub271"><a href='category.aspx?id=98'>ACUMULATOR PLUMB-GEL RITAR</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top3">BABYCARE
<ul>
<li id="mid31">ALARME BEBELUSI (BABYPHONE)
<ul>
<li id="sub311"><a href='category.aspx?id=54'>BABYPHONE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid32">LAMPI DE VEGHE SI LAMPI IN FORMA DE JUCARII
<ul>
<li id="sub321"><a href='category.aspx?id=55'>lampi de veghe si lampi in forma de jucarii</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top4">BATERII
<ul>
<li id="mid41">BATERII ALCALINE
<ul>
<li id="sub411"><a href='category.aspx?id=4'>• BATERII RED LINE</a>
</li>
</ul>
<ul>
<li id="sub412"><a href='category.aspx?id=5'>• BATERII X-POWER</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid42">BATERII BUTON
<ul>
<li id="sub421"><a href='category.aspx?id=6'>• BATERII BUTON ALCALINE</a>
</li>
</ul>
<ul>
<li id="sub422"><a href='category.aspx?id=7'>• BATERII BUTON LITIU</a>
</li>
</ul>
<ul>
<li id="sub423"><a href='category.aspx?id=8'>• BATERII AUDITIVE ZINC AIR</a>
</li>
</ul>
<ul>
<li id="sub424"><a href='category.aspx?id=92'>SET BATERII BUTON HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid43">BATERII LITIU DE MARIMI STANDARD
<ul>
<li id="sub431"><a href='category.aspx?id=58'>• BATERII LITIU in blistere</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid44">BATERII LITIU PHOTO
<ul>
<li id="sub441"><a href='category.aspx?id=59'>• BATERI LITIU pentru aplicatii foto</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid45">BATERII SILVER OXID
<ul>
<li id="sub451"><a href='category.aspx?id=93'>BATERII BUTON SILVER OXID</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid46">TESTERE BATERII SI ACCESORII
<ul>
<li id="sub461"><a href='category.aspx?id=9'>• TESTERE BATERII SI ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top5">INCARCATOARE
<ul>
<li id="mid51">GAMA HyCell
<ul>
<li id="sub511"><a href='category.aspx?id=90'>HyCell</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid52">INCARCATOARE CU ACUMULATORI
<ul>
<li id="sub521"><a href='category.aspx?id=42'>INCARCATOARE CU ACUMULATORI</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid53">INCARCATOARE CU MICROPROCESOR
<ul>
<li id="sub531"><a href='category.aspx?id=44'>SERIA POWERLINE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid54">INCARCATOARE FARA ACUMULATORI
<ul>
<li id="sub541"><a href='category.aspx?id=94'>INCARCATORI FARA ACUMULATOR</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid55">INCARCATOARE HIGH-TECH CU FUNCTIE DE REIMPROSPATARE
<ul>
<li id="sub551"><a href='category.aspx?id=45'>seria Energy</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid56">INCARCATOARE MULTIMEDIA
<ul>
<li id="sub561"><a href='category.aspx?id=48'>incarcator pentru acumulatori Lithiu-Ion</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid57">INCARCATOARE Ni-Zn
<ul>
<li id="sub571"><a href='category.aspx?id=97'>INCARCATOARE Ni-Zn</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid58">INCARCATOARE PENTRU ACUMULATORI PB-GEL SI ACUMULATORI AUTO
<ul>
<li id="sub581"><a href='category.aspx?id=49'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IU</a>
</li>
</ul>
<ul>
<li id="sub582"><a href='category.aspx?id=50'>incarcatoare pentru baterii cu plumb cu incarcare dupa curba caracteristica IUoU</a>
</li>
</ul>
<ul>
<li id="sub583"><a href='category.aspx?id=51'>incarcatoare pentru baterii auto cu plumb sau plumb-gel</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid59">INCARCATOARE RAPIDE
<ul>
<li id="sub591"><a href='category.aspx?id=47'>cu microprocesor pentru pachete de acumlatori</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid510">INCARCATOARE STANDARD
<ul>
<li id="sub5101"><a href='category.aspx?id=41'>BASIC</a>
</li>
</ul>
<ul>
<li id="sub5102"><a href='category.aspx?id=46'>pentru acumulatori NiCd/NiMH</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid511">INCARCATOARE ULTRARAPIDE
<ul>
<li id="sub5111"><a href='category.aspx?id=43'>ULTRARAPIDE</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid512">SERIA GLOBAL LINE
<ul>
<li id="sub5121"><a href='category.aspx?id=60'>seria Global line</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid513">SURSE DE ALIMENTARE
<ul>
<li id="sub5131"><a href='category.aspx?id=52'>surse de alimentare universale</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top6">LANTERNE
<ul>
<li id="mid61">INDICATOR
<ul>
<li id="sub611"><a href='category.aspx?id=71'>indicator cu lanterna</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid62">LANTERNE ANTI-EX
<ul>
<li id="sub621"><a href='category.aspx?id=61'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid63">LANTERNE CU CARCASA METALICA
<ul>
<li id="sub631"><a href='category.aspx?id=63'>cu carcasa metalica</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid64">LANTERNE DE FRUNTE
<ul>
<li id="sub641"><a href='category.aspx?id=57'>lanterne de frunte</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid65">LANTERNE DE LUCRU
<ul>
<li id="sub651"><a href='category.aspx?id=95'>LANTERNE DE LUCRU</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid66">LANTERNE HOME DECORATION
<ul>
<li id="sub661"><a href='category.aspx?id=69'>lanterne Lifestyle</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid67">LANTERNE INDUSTRIALE
<ul>
<li id="sub671"><a href='category.aspx?id=78'>lanterne industriale reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid68">LANTERNE LASER
<ul>
<li id="sub681"><a href='category.aspx?id=70'>lanterne laser (Laserpointer)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid69">LANTERNE PORTABILE REINCARCABILE
<ul>
<li id="sub691"><a href='category.aspx?id=65'>lanterne portabile reincarcabile (AS, ASN)</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid610">LANTERNE REINCARCABILE
<ul>
<li id="sub6101"><a href='category.aspx?id=66'>lanterne reincarcabile</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid611">LANTERNE SERIA AGENT
<ul>
<li id="sub6111"><a href='category.aspx?id=56'>seria AGENT</a>
</li>
</ul>
</li>
</ul>
<ul>
<li id="mid612">LANTERNE TIP BRELOC
<ul>
<li id="sub6121"><a href='category.aspx?id=64'>tip breloc</a>
</li>
</ul>
</li>
</ul>
</li>
<li id="top7">TEHNOLOGIA ZERO WATT
<ul>
<li id="mid71">PRIZE ECOMOMICE ZERO WATT
<ul>
<li id="sub711"><a href='category.aspx?id=53'>seria AES</a>
</li>
</ul>
</li>
</ul>
</li>
</div>
</ul>
</div>
</div>
<script src="js/jquery.accordion.source.js"></script>
<script>
// <![CDATA[
$(document).ready(function() {
$('ul').accordion();
});
// ]]>
</script>
<script>
/*Main Left Menu Begin*/
var topActiveid = "";
var level1Activeid = "";
var level2Activeid = "";
$(document).ready(function() {
if (localStorage.getItem("activeLeftMenu") != null)
{
var strarray = localStorage.getItem("activeLeftMenu").split("/");
topActiveid = strarray[0].toString();
level1Activeid = strarray[1].toString();
level2Activeid = strarray[2].toString();
$(".accordion>ul>li.active").removeClass("active");
//if ($("#"+topActiveid) =! null)
$("#"+topActiveid).addClass('active');
$("#"+topActiveid).click();
$("#"+topActiveid).slideDown();
//if ($("#"+level1Activeid) =! null)
$("#"+level1Activeid).addClass('active');
$("#"+level1Activeid).click();
$("#"+level1Activeid).slideDown();
//if ($("#"+level2Activeid) =! null)
$("#"+level2Activeid).addClass('active');//$('#topx3').addClass('active'):
$("#"+level2Activeid).click();
$("#"+level2Activeid).slideDown();
// $('#menu li.active').show();
// $('#menu li.active').slideDown('normal');
}
});
</script>
<!--MENU-->
I tried to use click() , slidedown() , show() to expand, but none of them are working. It's just selecting the top level, without expanding (see screenshot / i also attached the link).
img: Not expanding menu - screenshot
link: Website

You have to call the .click() on the a element which handles the click.
Then it is working fine.
Eg.
$('#top6 > a').click()
Or in your code:
$("#"+topActiveid + " > a").click();
The logic to add / remove the active class and also the slidedown() call are not necessary.

Show/Hide submenu by click HTML

I have a side menu with some menu items.
One menu items can have some submenu items
Here is how I realize this
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
I need to click on a menu item and it will show submenu items if I click once again it will hide them. How can I realize this?

See here I apply click even on li not on because on anchor you add a url of other pages, so 22 event not fired on same element.Checkout and if any issue let me know
$(document).ready(function() {
$('.main_wrapper li').on('click', function() {
$(this).children('.submenu').slideToggle();
});
});
.submenu {
display: none;
}
ul li {
background-color: #000;
margin-bottom: 5px;
cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<ul class="main_wrapper">
<li>Calendar
<ul class="submenu">
<li>- Shedule new appointment</li>
</ul>
</li>
<li>Patient Database</li>
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
</ul>

if you use bootstrap then it will be easy to do with it.
<div id="mySidenav" class="sidenav mainmenu">
×
Home
<!-- my changes starts here -->
<li data-toggle="collapse" data-target="#test">Calendar
<ul class="submenu collapse" id="test">
<li>- Shedule new appointment</li>
</ul>
</li>
Patient Database
<li>Findings
<ul class="submenu">
<li>- All Findings</li>
<li>- Open Findings</li>
</ul>
</li>
<li>Controlling
<ul class="submenu">
<li>- Patients</li>
<li>- Medical Partners</li>
<li>- Internal Controlling</li>
</ul>
</li>
<li>Invoices
<ul class="submenu">
<li>- Receipt of payment</li>
</ul>
</li>
source: https://www.w3schools.com/bootstrap/bootstrap_collapse.asp

Vue.js make menu item active

How could I make a menu item active in Vue.js when someone visits the page? I can't find any great example on the web?
<header>
<nav>
<ul class="navigation">
<li class="navigation-item ritten" v-if="user.authenticated" v-link="{name: 'rides'}">
<p>Ritten</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'newRide'}">
<p>Nieuwe rit</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'locations'}">
<p>Locaties</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'newLocation'}">
<p>Nieuwe locatie</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'type'}">
<p>Types</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'users'}">
<p>Gebruikers</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'profile'}">
<p>Profiel</p>
</li>
<li class="navigation-item" v-if="user.authenticated" v-link="{name: 'register'}">
<p>Registreer</p>
</li>
<li class="navigation-item" v-if="user.authenticated" #click.prevent="logout">
<p>Uitloggen</p>
</li>
</ul>
<nav>
</header>
Thanks

You can toggle an active class in your v-link
v-link="{path : 'your-link', activeClass: 'active', exact: true}"