Check this fiddle
In the above fiddle only the text within clicked li
and its successor li's
will be displayed:
jQuery
$('ul').on('click','li',function(){
$('#result').html($(this).text());
return false;
});
Updated code in response to comment
HTML(slight change added class="par"
to Country and State)
<ul>
<li id="level-0" class="par">India
<ul>
<li id="level-0-3" class="par">Tamil nadu
<ul>
<li>Chennai</li>
<li>Trichy</li>
<li>Madurai</li>
<li>Kanya kuamri</li>
</ul>
</li>
</ul>
</li>
<li id="level-1" class="par">United Kingdom
<ul>
<li id="london" class="par">London
<ul>
<li>London1</li>
<li>London2</li>
<li>London3</li>
<li>London4</li>
</ul>
</li>
</ul>
</li>
</ul>
<div id="result"></div>
Updated JQuery
$('ul').on('click','li',function(){
$('#result').html($(this).html());
if($(this).attr('class')=="par")
{
return false;
}
});
Added little CSS for look.(Do CSS change as needed)
html,body{
margin:0px;
padding:0px;
width:100%;
}
ul{
width:50%;
display:table-cell;
border:1px solid black;
}
div{
width:50%;
display:table-cell;
border:1px solid black;
}