Get parent child label/value upon checkbox selection of child li elements - javascript

I'm trying to get the value of the lvl1 and lvl2 li labels upon selection of the checkbox of their respective child li.
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>
I want to get the value upon checkbox for their respective parents-child relationship
Click first checkbox to get this value.
Level-1 > Level-2 > Level-3 Value 1
Click 2nd checkbox to get the below value.
Level-1 > Level-2 > Level-3 Value 2


you can add on change event and get all li parents of changed input to get the info about the li 'level' I added this as data attribute:
$(document).ready(function(){
$('.childbox').change(function(){
var parents="";
var current_value=$(this).val();
$(this).parents('li').each(function( index ) {
parents= $(this).data('level-name')+" > "+parents;
});
console.log(parents+" : "+current_value);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1" data-level-name='Level 1'>
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2" data-level-name='Level 2'>
<a><label>Level-2</label></a>
<ul>
<li class="lvl3" data-level-name='Level 3'>
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>


I wrote up some example code as to how to do it. I would use relative selectors to accomplish this.
$("input[type=checkbox]").change(function () {
console.log($(this).closest(".lvl2").find("label").html())
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list" >
<li class="lvl1">
<a><h4>Level-1</h4></a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1"/>
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-3</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2"/>
</li>
</ul>
</li>
</ul>
</li>
</ul>


Try this .i was added code for 'leve1,level2' and label,input value.you could select as your wish
$('input:checkbox').click(function(){
console.log($(this).closest('.lvl1').text())
console.log($(this).closest('.lvl2').find('label').text())
console.log($(this).val())
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="list">
<li class="lvl1">
<a>
<h4>Level-1</h4>
</a>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value1" />
</li>
</ul>
</li>
</ul>
<ul>
<li class="lvl2">
<a><label>Level-2</label></a>
<ul>
<li class="lvl3">
<input type="checkbox" class="childbox" value="Level-3 Value2" />
</li>
</ul>
</li>
</ul>
</li>
</ul>

Related

Find first parent element with specific first-level descendant

I am trying get first parent (Only) of selected element which have Input type Checkbox as first-level descendant.
HTML
$('input[type="checkbox"]').change(function(e) {
$(this)
.parent()
.parents("li:has(input[type='checkbox'])")
.find(">span")
.css("background-color", "yellow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="UL1">
<li class="LI1">
<input class="checkbox1" type="checkbox" />
<span>LI1</span>
<ul class="UL2">
<li class="LI3">
<input class="checkbox2" type="checkbox" />
<span>LI3</span>
</li>
<li class="LI4">
<input class="checkbox3" type="checkbox" />
<span>LI4</span>
<ul class="UL3">
<li class="LI5">
<span>LI5</span>
</li>
<li class="LI6">
<span>LI6</span>
<ul class="UL4">
<li class="LI7">
<span>LI7</span>
</li>
<li class="LI8">
<input class="checkbox4" type="checkbox" />
<span>LI8</span>
</li>
<li class="LI9">
<span>LI9</span>
</li>
</ul>
</li>
<li class="LI10">
<span>LI10</span>
</li>
</ul>
</li>
<li class="LI11">
<span>LI11</span>
</li>
</ul>
</li>
<li class="LI12">
<input class="checkbox5" type="checkbox" />
<span>LI12</span>
</li>
</ul>
</div>
NOTE: In this code I am highlighting span only as an example, but my actual purpose of having parent with checkbox is different.
Here when selecting "LI8" checkbox, I need its parent that has Checkbox. according to this I should receive "LI4" but when I am using ".parents(). it is giving me all parents including "LI" not having Checkbox.
Does anybody know how can I get only first parent that has checkbox as first-level descendant? In my scenario on selection of "LI8", only "LI4" should return and "LI6" and "LI1" must ignore. Thank you.

li:has(input[type='checkbox']) will select all lis that contain an input at any level.
Use the direct descendant selector (>) here: .parents("li:has(>input[type='checkbox'])") to select those lis that have a child input.
You can then limit the selection to a single item using .first().
$('input[type="checkbox"]').change(function(e) {
$(this)
.parent()
.parents("li:has(>input[type='checkbox'])")
.first()
.find(">span")
.css("background-color", "yellow");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<ul class="UL1">
<li class="LI1">
<input class="checkbox1" type="checkbox" />
<span>LI1</span>
<ul class="UL2">
<li class="LI3">
<input class="checkbox2" type="checkbox" />
<span>LI3</span>
</li>
<li class="LI4">
<input class="checkbox3" type="checkbox" />
<span>LI4</span>
<ul class="UL3">
<li class="LI5">
<span>LI5</span>
</li>
<li class="LI6">
<span>LI6</span>
<ul class="UL4">
<li class="LI7">
<span>LI7</span>
</li>
<li class="LI8">
<input class="checkbox4" type="checkbox" />
<span>LI8</span>
</li>
<li class="LI9">
<span>LI9</span>
</li>
</ul>
</li>
<li class="LI10">
<span>LI10</span>
</li>
</ul>
</li>
<li class="LI11">
<span>LI11</span>
</li>
</ul>
</li>
<li class="LI12">
<input class="checkbox5" type="checkbox" />
<span>LI12</span>
</li>
</ul>
</div>

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>

Add class to ancestor element based on existence of element in the hierarchy

I have a sample code below
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="active">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
If one of the li has a class active how can I also add a class active on the parent li or this part
<li class="treeview">

You can use jquery to achieve this. Please find the snippet below.
$('.treeview-menu li').on('click', function() {
$(this).addClass('active');
$(this).closest('li.treeview').addClass('active');
})
.active>a {
color: green;
}
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<ul>
<li class="treeview">
<a href="#"><i class="fa fa-link"></i> <span>Multilevel</span>
<span class="pull-right-container">
<i class="fa fa-angle-left pull-right"></i>
</span>
</a>
<ul class="treeview-menu">
<li class="">Link in level 2</li>
<li>Link in level 2</li>
</ul>
</li>
</ul>

If you need the entire treeview ancestry of an active <li> to have the class .active, you can use jQuery's :has:
$('.treeview:has(li.active)').addClass('active');
$('.treeview:has(li.active)').addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
If you need only the immediately closest treeview, you can use .closest():
$('.treeview li.active').closest(".treeview").addClass('active');
$('.treeview li.active').closest(".treeview").addClass('active');
.active::before {content: 'Active - '}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li class="active">4 (Active)</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="treeview">1
<ul>
<li class="treeview">2
<ul>
<li class="treeview">3
<ul>
<li>4</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>

You don't want to select any li.active outside of the .treeview tree hierarchy:
$('.treeview li.active').closest('.treeview').addClass('active');

jQuery switching lists with same class

I created a bit complex list and I wish after clicking on element with class ".recipes", display it inside paragraph but after clicking on button prev or next, I wish to switch to previous or next element with same class name. I know already how to switch the list if they are next to each other but after putting them inside different parents it seems more complicated:
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>
To show clicked element:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
and to show previous element with class "recipes" I got from another person on this forum is here however because classes have different parents now, it doesn't work, I thought that i can add more parents() and because of that find previous or next ".recipes" but it didn't work out:
$(".prev").click(function() {
var isFirst = $(".recipies.active").is(":first-child");
if(isFirst){
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").prev().trigger("click");
}
});

Check this out:
$(".recipies").on("click", function() {
$(".recipies.active").add($(this)).toggleClass("active");
var recipieValue = $(this).text();
var showRecipies = document.querySelector(".showRecipies");
showRecipies.innerHTML = recipieValue;
});
$(".prev").click(function() {
var isFirst = $(".recipies.active").text() == $($(".recipies").get(0)).text();
if (isFirst) {
$(this).parent().find(".recipies:last").trigger("click");
} else {
$(".recipies.active").parent().parent().prev().find(".recipies").trigger("click");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div>
<button class="prev">prev</button>
<button class="next">next</button>
<p class="showRecipies"></p>
<ul class="listOfRecipies">
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Drinks</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Vegetables</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Meat</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Fruits</li>
</ul>
</li>
<li>
<ul class="particularRecipie">
<li class="timeOfPreparation">3:20</li>
<li class="recipies">Others</li>
</ul>
</li>
</ul>
</div>

jquery mtree onload open last clicked node with cookie option

I am using mtree( sample you can seehere for display my menu list nodes When i click on the node text (hyperlink) . I want to open the node which i clicked and all other nodes should be closed. I am using the following code.
In main.html page i have list with Africa,America,Asia,Europe,Oceania,Arctica and
Antarctica
Africa is having sub menu as: Algeria,Marocco,Libya,Somalia,Kenya,Mauritania and South Africa( all are hyperlink text)
when I click on kenya text hyperlink it will redirects to kenya.html page so on load of kenya.html i want Africa menu list should open with Kenya text highlighted
main.html
<body>
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul>
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS MAIN PAGE
</body>
kenya.html
<body onload="clickButton()">
</div>
<ul class="mtree transit">
<li id ="shiva" class ="shiva">Africa
<ul id = "shiva">
<li>Algeria</li>
<li>Marocco</li>
<li>Libya</li>
<li>Somalia</li>
<li>Kenya</li>
<li>Mauritania</li>
<li>South Africa</li>
</ul>
</li>
<li>America
<ul>
<li>North-America
<ul>
<li>Canada</li>
<li>USA
<ul>
<li>New York</li>
<li>California
<ul>
<li>Los Angeles</li>
<li>San Diego</li>
<li>Sacramento</li>
<li>San Francisco</li>
<li>Bakersville</li>
</ul>
</li>
<li>Lousiana</li>
<li>Texas</li>
<li>Nevada</li>
<li>Montana</li>
<li>Virginia</li>
</ul>
</li>
</ul>
</li>
<li>Middle-America
<ul>
<li>Mexico</li>
<li>Honduras</li>
<li>Guatemala</li>
</ul>
</li>
<li>South-America
<ul>
<li>Brazil</li>
<li>Argentina</li>
<li>Uruguay</li>
<li>Chile</li>
</ul>
</li>
</ul>
</li>
<li>Asia
<ul>
<li>China</li>
<li>India</li>
<li>Malaysia</li>
<li>Thailand</li>
<li>Vietnam</li>
<li>Singapore</li>
<li>Indonesia</li>
<li>Mongolia</li>
</ul>
</li>
<li>Europe
<ul>
<li>North
<ul>
<li>Norway</li>
<li>Sweden</li>
<li>Finland</li>
</ul>
</li>
<li>East
<ul>
<li>Romania</li>
<li>Bulgaria</li>
<li>Poland</li>
</ul>
</li>
<li>South
<ul>
<li>Italy</li>
<li>Greece</li>
<li>Spain</li>
</ul>
</li>
<li>West
<ul>
<li>France</li>
<li>England</li>
<li>Portugal</li>
</ul>
</li>
</ul>
</li>
<li>Oceania
<ul>
<li>Australia</li>
<li>New Zealand</li>
</ul>
</li>
<li>Arctica</li>
<li>Antarctica</li>
</ul>
<script src="jquery.min.js"></script>
<script src='jquery.velocity.min.js'></script>
<script src="mtree.js"></script>
<script src="shiva.js"></script>
THIS IS Kenya PAGE
</body>

Categories

Resources