How to show an ul when a particular li is clicked using jquery? - html-lists

Question

I want to show the ul class of li which is clicked.
My html is:
<ul id="level1" class="category">
<li class="level1 inactive">
abc
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
xyz
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
<li class="level1 inactive">
bcd
<ul id="level2" style=" display:none;">
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
<li class="level2 inactive">Level2</li>
</ul>
</li>
</ul>
the js which I use to show the ul is below:
<script>
var $j = jQuery.noConflict();
$j(function() {
$j('li.level1').click(function() {
$j(this).addClass("current").removeClass("inactive");
$j('ul#level2:visible').hide();
$j('ul#level2').toggle();
});
});
</script>
css:
ul.category li.level1.current a{background:url("../images/left_menu_new.png") no-repeat scroll 10px -285px transparent;}
.active{display:block;}
When I click the li.level1 current class design is added to every li of level1 , ul inside the selected li is opened and as it has anchor tag the page is redirected to the url inside the anchor tag .
What I want is when I click the li the current class should be added only to the selected li & the page of respective url in the anchor tag should be opened and ul of selected li should be opened there.
Kindly guide me to resolve this issue.

Answer 1

For you to achieve this, you will have to take advantage of location hash.
Do the following :
On your anchor tags, that toggle your ul, add href to a dummy unique value. Make sure the value is same as the id of the li you are in.
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
When ever page loads, read window location hash.
var li = window.location.hash;
If hash is found, show the related ul.
if(li!=""){
$(li + " ul").show();
}
This way you will be able to show the last opened ul by the user.
$(function() {
var li = window.location.hash;
if (li != "") {
$(li + " ul").show();
}
$('li.level1 a').click(function() {
$(this).parent().siblings().each(function() {
$(this).find("ul.level1").hide();
});
$(this).siblings("ul.level1").show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="level0">
<li class="level1" id="li1">
Toggle.1
<ul class="level1" style="display:none;">
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
<li class="level2">Level2.1
</li>
</ul>
</li>
<li class="level1" id="li2">
Toggle.2
<ul class="level1" style="display:none;">
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
<li class="level2">Level2.2
</li>
</ul>
</li>
<li class="level1" id="li3">
Toggle.3
<ul class="level1" style="display:none;">
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
<li class="level2">Level2.3
</li>
</ul>
</li>
</ul>