Code: http://jsfiddle.net/JhcYu/
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<link type="text/css" href="css/smoothness/jquery-ui-1.8.16.custom.css" rel="stylesheet" />
<script type="text/javascript" src="script/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.16.custom.min.js"></script>
<script type="text/javascript">
$(function() {
$("#tabs, #tabs2").tabs();
$('#tabs').tabs('select', 0);
$('#alt2 li').click(function(e) {
if($(this).find('>ul').is(':visible'))
$(this).find('>span').html('+');
else
$(this).find('>span').html('-');
$(this).find('>ul').stop(true, true).slideToggle(150, "swing")
/* .end().siblings().find('ul').slideUp().closest('li') */
.find('>span').html('+');
$('#alt2 li').each(function(){
$(this).css({ 'font-weight' : 'normal' });
});
$(this).css({ 'font-weight' : 'bold' }).children().css({ 'font-weight' : 'normal' });
e.stopPropagation();
});
$('#alt2 li').each(function(i, val){
var children = $(val).find('ul li');
if(children.size() > 0)
$(val).prepend('<span>+</span>');
});
function selectListitemByText(listitemText) {
$('#alt2 li').each(function(i, val){
var currentListitemText = $(this).clone().children().remove().end().text().trim();
if(currentListitemText == listitemText) {
//$(val)...
return false;
}
});
}
});
</script>
<style type="text/css">
body { font: 12px Verdana; }
.ui-tabs-nav { background: transparent; border-width: 0px 0px 1px 0px; }
.ui-tabs .ui-tabs-nav { padding: 0.2em 0 0; }
.ui-widget-content { border: 0; }
.ui-tabs .ui-tabs-panel { border: 1px solid #aaa; border-width: 1px; border-top: 0;}
.ui-corner-all, .ui-corner-bottom, .ui-corner-right, .ui-corner-br { border-radius: 0; }
#tabs-2 { padding: 0; }
#alt2 { width: 500px; margin: 0 auto; }
#alt2 ul { list-style: none; }
#alt2 ul ul { display: none; }
#alt2 li { cursor: pointer; margin: 5px; }
</style>
</head>
<body>
<div id="alt2">
<ul>
<li>
System Audit
<ul>
<li >Site and Contacts</li>
<li>Current Licenses</li>
</ul>
</li>
<li>
Expected Result
<ul>
<li>
Control System Information
<ul>
<li>ABB Contacts</li>
<li>Channel Partner Contact</li>
</ul>
</li>
<li>Machine ID's</li>
<li>Current Licenses</li>
</ul>
</li>
<li>
Quotation
<ul>
<li>Lorem</li>
<li>Ipsum</li>
<li>Result</li>
</ul>
</li>
</ul>
</div>
</body>
</html>
I want a function, “selectListitemByText”, that selects a listitem at any depth. The functionality should remain the same (+ turns in to – when expended, font+weight: bold etc). Ive started writing the function but im not really sure how to select the correct parents and children.
Thanks
I have written a function which works pretty well, but I had to had some stuff to your code.
See the comments in this fiddle :
http://jsfiddle.net/59tKg/5/