This is my first question. I work with Jquery treeview. I have already created a treeview and when I clicked a parent node using mouse, it expanded fine. But I really want to expand each parent node by clicking on a button. This code show how I created a treeview.
body, a {
color: #3B4C56;
font-family: sans-serif;
font-size: 14px;
text-decoration: none;
}
a{
cursor:pointer;
}
.tree ul {
list-style: none outside none;
}
.tree li a {
line-height: 25px;
}
.tree > ul > li > a {
color: #3B4C56;
display: block;
font-weight: normal;
position: relative;
text-decoration: none;
}
.tree li.parent > a {
padding: 0 0 0 28px;
}
.tree li.parent > a:before {
<!--background-image: url("../images/plus_minus_icons.png"); -->
background-position: 25px center;
content: "";
display: block;
height: 21px;
left: 0;
position: absolute;
top: 2px;
vertical-align: middle;
width: 23px;
}
.tree ul li.active > a:before {
background-position: 0 center;
}
.tree ul li ul {
border-left: 1px solid #D9DADB;
display: none;
margin: 0 0 0 12px;
overflow: hidden;
padding: 0 0 0 25px;
}
.tree ul li ul li {
position: relative;
}
.tree ul li ul li:before {
border-bottom: 1px dashed #E2E2E3;
content: "";
left: -20px;
position: absolute;
top: 12px;
width: 15px;
}
#wrapper {
width: 400px;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!-- Note: IE8 supports the content property only if a !DOCTYPE is specified. -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<link rel="stylesheet" href="treeStyles.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js" type="text/javascript" > </script>
<script type="text/javascript">
$( document ).ready( function( ) {
$( '.tree li' ).each( function() {
if( $( this ).children( 'ul' ).length > 0 ) {
$( this ).addClass( 'parent' );
}
});
/* $( '.tree li.parent > a' ).click( function( ) {
$( this ).parent().toggleClass( 'active' );
$( this ).parent().children( 'ul' ).slideToggle( 'fast' );
});*/
$('#button1')
.unbind('click')
.click( function() {
$('.tree li.parent > a').parent().toggleClass( 'active' );
$('.tree li.parent > a').parent().children( 'ul' ).slideToggle( 'fast' );
});
});
/*
$('#button1').click(function(){
$('#li_1').children('ul').slideToggle( 'fast' );
}),
$('#button2').click(function(){
$('#li_2').children('ul').toggle();
}); */
</script>
</head>
<body>
<div id="wrapper">
<div class="tree">
<ul id="list">
<div tabindex="-1" id="1">
<li id="li_1"><a>TestSuite 1</a>
<ul>
<div tabindex="-1" id="11"><li><a>Test 1 1 Started</a></li></div>
<div tabindex="-1" id="12"><li><a>Test 1 1 Passed</a></li></div>
<div tabindex="-1" id="13"><li><a>Test 1 2 Started</a></li></div>
<div tabindex="-1" id="14"><li><a>Test 1 2 Failed</a></li></div>
<div tabindex="-1" id="15"><li><a>Test 1 3 Started</a></li></div>
<div tabindex="-1" id="16"><li><a>Test 1 3 Passed</a></li></div>
</ul>
</li>
</div>
<div tabindex="-1" id="2">
<li id="li_2"><a>TestSuite 2</a>
<ul>
<div tabindex="-1" id="21"><li><a>Test 2 1 Started</a></li></div>
<div tabindex="-1" id="22"><li><a>Test 2 1 Passed</a></li></div>
<div tabindex="-1" id="23"><li><a>Test 2 2 Started</a></li></div>
<div tabindex="-1" id="24"><li><a>Test 2 2 Failed</a></li></div>
</ul>
</li>
</div>
</ul>
</div>
</div>
<br><br>
<input type="button" class="buttonLoad" id="button1" value="Expand TestSuite 1" />
<input type="button" class="buttonLoad" id="button2" value="Expand TestSuite 2" />
<script>
/*
function myLoadFunction1(){
//expand TestSuite1
openMyOwnBranchInTree(li_1);
}
function myLoadFunction2(){
//expand TestSuite2
openMyOwnBranchInTree(li_2);
}
function openMyOwnBranchInTree(idLeaf) {
$('#table' + idLeaf).parents('li').show();
}
*/
</script>
</body>
</html>Here I used myLoadFunction1() and myLoadFunction2() functions to expand/collapse each TestSuites programmatically.Also I need to expand/collapse a node by refer its id.
I tried to expand/collapse each parent node using openMyOwnBranchInTree() function, but it does not work. How to improve my code to get my result or is there any easy way to this task? advices are welcome.. Thank you.
Edited.
I tried following code.(Edit the previous code and show where that I changed by comment that lines.)I commented myLoadFunction1() and myLoadFunction2() functions and I added jquery code.
Now #button1 expand/collapse all child nodes.. But how to go to my target?Can please anyone help me? Thank you.
