473,386 Members | 1,621 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > collapse tree menu using dom???

Join Bytes to post your question to a community of 473,386 software developers and data experts.

Collapse tree menu using dom???

I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help
appreciated. John

In the below script, I can expand and contract the nodes when clicked
on, but I want the menu to close all other siblings to the node
clicked so that only one sub menu option is expanded at one time. If
the node display is being set to none, I would also like it to
collapse all the sub nodes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
#level_1, #level_2, #level_3, #level_4 {
cursor:pointer;
cursor:hand;
font-weight:normal;
list-style-image:url(plus.gif);
color:#003366;
padding-bottom:5px;
}
..folderheader, .folderlist {
display:none;
}
..folderlist {
list-style-image:url(report.gif);
}
LI {
padding-left:2px;
}
a:visited {
color: #003366;
}
a:hover {
color: #663333;
}
a:active {
color: #003366;
}
a:link {
color: #003366;
}
..style1 {
font-size: 14pt;
font-weight: bold;
}
body {
margin-left: 15px;
}
</style>
<script language="javascript" type="text/javascript">
var head="display:''"
img1=new Image()
img1.src="plus.gif"
img2=new Image()
img2.src="minus.gif"

function showMenu(){
var elm=event.srcElement;
//unsure how to best traverse the dom here in a list
var myMenuLength;
//for(i=0;i<myMenuLength;i++){

//}

//expands or contracts the nodes clicked on
if(elm.id && elm.id.indexOf('level') > -1){
if (elm.childNodes(1).currentStyle.display=="none"){
elm.childNodes(1).style.display="block"
elm.style.listStyleImage="url(minus.gif)"
}
else{
elm.childNodes(1).style.display="none"
elm.style.listStyleImage="url(plus.gif)"
}
}
}
document.onclick=showMenu;
</script>
</head>
<body>
<ul id="mainmenu">
<li id="level_1">Menu 1
<ul class="folderheader">
<li id="level_2">Report Types
<ul class="folderheader">
<li id="level_3">Reports 1
<ul class="folderheader">
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3">Reports 2
<ul class="folderheader">
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1">Menu 2
<ul class="folderheader">
<li id="level_2">Report Name
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
Jul 23 '05 #1
7 2948
johkar wrote:
I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help


element.childNodes returns the direct children of a element
as an array, it does not return the children of the
children. When the user clicks on a menu item, you need to
do something like (untested - for illustration only):

var a = <clickedNode>.childNodes;
for (var i=0; i<a.length; ++i) {
a[i].style.display = '';
}

As the user goes down each level, you then display the
children of each node clicked on. Once the user selects
something at the end of a branch, you then can either:

Remember all the nodes you displayed and explicity
un-display them (hideous! don't try it!) or simply travel
down the branch recursively from the top and un-display all
childNodes whether they were displayed or not (simple).

Here is a recursion routine supplied by Ryan Stewart in a
post here:

news://inetbws1.citec.qld.gov.au:119...**@comcast.com

Where Ryan has "out += node.nodeName + '\n';"

put in your code to undisplay the node, similar to:

n.style.display = 'none';

Here's the script:

<script type="text/javascript">
var out = "";
function listNodes(n) {
out += n.nodeName + "\n";
for (var i=0; i<n.childNodes.length; ++i) {
listNodes(n.childNodes[i]);
}
}
listNodes(document.getElementById("listMe"));
alert(out);
</script>
Good luck - Fred.
Jul 23 '05 #2
RobG wrote:
johkar wrote:
I am confused on childNodes or children. When you have nested lists,
I would think it would all be one list in the Dom, this doesn't seem
to be the case. So how do you traverse an unordered list? Any help

element.childNodes returns the direct children of a element as an array,
it does not return the children of the children. When the user clicks on
a menu item, you need to do something like (untested - for illustration
only):

[snip] you then can either:

Remember all the nodes you displayed and explicity un-display them
(hideous! don't try it!) or simply travel down the branch recursively
from the top and un-display all childNodes whether they were displayed
or not (simple).

Good start Rob, I've had a play and come up with the following lightly
tested collapsing menus.

They are hidden with JS so work if JS is turned off. Just add links as
required, presumably they'd bring up content in an iFrame. The only
decision is whether to leave the menus extended when a link is clicked
on (my preference as it acts as a kind of breadcrumb) or to reset them.

I've included an example with the following.

They could be further optimised by not going down the tree if the UL is
already hidden, but hardly seems worth it if the menues are small. The
script only hides ULs, not anything else but that effectively hides all
the children of the UL.

Watch for wrapping...

<html>
<head><title>Collapsing Menu Example</title>
<meta name="Date" content="2004-10-05">
<meta name="Author" content="Fred Oz">
<script type="text/javascript">

// Handle menu click
function mClick(n) {

// Go up to LI or UL, whichever comes first
// Will always be LI except on load when will be UL
while (n.nodeName != 'LI' && n.nodeName != 'UL') {
n = n.parentNode;
}

// remember node
var n0 = n;

// Go up to UL if stopped at LI above
while (n.nodeName != 'UL') {
n = n.parentNode;
}

// Make children of all sibling UL's hidden
// Do not hide kids of node clicked on
// to prevent flashing off & on
var o = n.childNodes;
for (var i=0; i<o.length; ++i) {
if (0[i] != n0) hideUL(o[i]);
}

// Make children of node clicked on visible
for (var k=0; k<n0.childNodes.length; ++k) {
if (n0.childNodes[k].style) n0.childNodes[k].style.display='';
}
}

function hideUL(x) {
// Hide UL
if (x.nodeName == 'UL') x.style.display='none';

// Recurse down tree, hiding all ULs
for (var j=0; j<x.childNodes.length; ++j) {
hideUL(x.childNodes[j]);
}
}

// Not really needed, see note below
function resetMenu() {
mClick(document.getElementById("menu0"));
}

</script>

</head>

<body>
<!-- Menus start here -->

<ul id="menu0">
<li><a href="#" onclick="mClick(this)">menu 0 Level 0</a>
<ul id="menu1">
<li><a href="#" onclick="mClick(this)">menu 0 Level 0 Level 0</a>
<ul>
<li>menu 0 Level 0 Level 0 Level 0</li>
<li>menu 0 Level 0 Level 0 Level 1</li>
<li><a href="#" onclick="
alert('About to reset the menu,'
+ '\nI don\'t like this behaviour');
resetMenu();
">menu 0 Level 0 Level 0 Level 2</a></li>
</ul
</li>

<li><a href="#" onclick="mClick(this);">menu 0 Level 0 Level 1</a>
<ul>
<li>menu 0 Level 0 Level 1 Level 0</li>
<li>menu 0 Level 0 Level 1 Level 1</li>
<li>menu 0 Level 0 Level 1 Level 2</li>
</ul
</li>
</ul>
</li>
<li><a href="#" onclick="mClick(this)">menu 0 Level 1</a>
<ul>
<li><a href="#" onclick="mClick(this)">menu 0 Level 1 Level 0</a>
<ul>
<li>menu 0 Level 1 Level 0 Level 0</li>
<li>menu 0 Level 1 Level 0 Level 1</li>
<li>menu 0 Level 1 Level 0 Level 2</li>
</ul
</li>
<li><a href="#" onclick="mClick(this)">menu 0 Level 1 Level 1</a>
<ul>
<li>menu 0 Level 1 Level 1 Level 0</li>
<li>menu 0 Level 1 Level 1 Level 1</li>
<li>menu 0 Level 1 Level 1 Level 2</li>
</ul
</li>
</ul>
</li>
</ul>

<!-- Hide menus -->

<!--
If not intending to reset menus when link clicked
put the reset code here and get rid of resetMenu()
-->

<script type="text/javascript">
resetMenu();
</script>

<!-- Menus end here, put content below -->

</body>
</html>
Jul 23 '05 #3
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?

John

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #4
johkar N wrote:
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?

John


I tested the script I supplied up to 5 levels deep with about 40 items
and it works in a flash on my ancient Machine. The HTML gets a bit
unweildy, check your markup thoroughly.

My code uses exactly the same function call every time and only requires
one LI or UL at the top to have an id, the rest don't need one. There
are probably some tricks you can do with CSS to optimise it further.

Cheers, Fred.
Jul 23 '05 #5
johkar N wrote:
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?


I simply applied Fred's

<a href="#" onclick="mClick(this)"> stuff </a>

to each header in your orginal stuff and it worked fine (see
below). To get it working in IE, get rid of this style:

...folderheader, .folderlist {
display:none;
}

It's pretty hard to click on something that is hidden from
the get go. Also, if you hide stuff with styles and the JS
doesn't work, you will never see anything.

Cheers, Rob.

<ul id="mainmenu">
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 1</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Types</a>
<ul class="folderheader">
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 1</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 2</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 2</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetMenu();">Close menus</a></li>
</ul>

<script type="text/javascript">
resetMenu();
</script>
Jul 23 '05 #6
Thank you all. I got it. Great script. I changed, 0[i] to o[i]
because I couldn't fine 0 referenced...seemed to work both ways...not
sure why.

if (0[i] != n0) hideUL(o[i]);
if (o[i] != n0) hideUL(o[i]);

John

*** Sent via Developersdex http://www.developersdex.com ***
Don't just participate in USENET...get rewarded for it!
Jul 23 '05 #7
RobG <rg***@iinet.net.auau> wrote in message news:<Ay*****************@news.optus.net.au>...
johkar N wrote:
Thank you for the reply. FYI, I did have to change childnodes to
childNodes in a couple of places. I don't fully understand this script
yet. When I tried to add even more submenus as in my original example,
it errored out. I am still looking at the script. Any pointers?


I simply applied Fred's

<a href="#" onclick="mClick(this)"> stuff </a>

to each header in your orginal stuff and it worked fine (see
below). To get it working in IE, get rid of this style:

..folderheader, .folderlist {
display:none;
}

It's pretty hard to click on something that is hidden from
the get go. Also, if you hide stuff with styles and the JS
doesn't work, you will never see anything.

Cheers, Rob.

<ul id="mainmenu">
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 1</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Types</a>
<ul class="folderheader">
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 1</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><a href="#"
onclick="mClick(this)">Reports 2</a>
<ul class="folderheader">
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><a href="#"
onclick="mClick(this)">Menu 2</a>
<ul class="folderheader">
<li id="level_2"><a href="#"
onclick="mClick(this)">Report Name</a>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
</ul>
</li>
</ul>
</li>
<li><a href="#" onclick="resetMenu();">Close menus</a></li>
</ul>

<script type="text/javascript">
resetMenu();
</script>


MY QUESTION ####################

Ok, I am back at this, I am having trouble getting the plus and minus
gifs to show at the appropriate time. I.E. Click on a node and it
turns to a minus. Click on a another node and all nodes with an ID
containing "level" in their name turn to a plus sign except for the
one you are on or its children. The ALL CAPS COMMENTS are where I am
currently trying to do this (incorrectly).

All help or pointers appreciated. John

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#level_1, #level_2, #level_3, #level_4 {
cursor:pointer;
cursor:hand;
font-weight:normal;
list-style-image:url(plus.gif);
color:#003366;
padding-bottom:5px;
}
..folderlist {
list-style-image:url(report.gif);
}
LI {
padding-left:2px;
}
UL {
padding:5px;
}
</style>
<script language="javascript" type="text/javascript">
var head="display:''"
img1=new Image()
img1.src="plus.gif"
img2=new Image()
img2.src="minus.gif"

function showMenu(n){
// Go up to LI or UL, whichever comes first
// Will always be LI except on load when will be UL
while (n.nodeName != 'LI' && n.nodeName != 'UL') {
n = n.parentNode;
}

// remember node
var n0 = n;

// Go up to UL if stopped at LI above
while (n.nodeName != 'UL') {
n = n.parentNode;
}

// Make children of all sibling UL's hidden
// Do not hide kids of node clicked on
// to prevent flashing off & on
var o = n.childNodes;
for (var i=0; i<o.length; ++i) {
if (o[i] != n0){
hideUL(o[i]);
}
}

// Make children of node clicked on visible
for (var k=0; k<n0.childNodes.length; ++k) {
if (n0.childNodes[k].style){
n0.childNodes[k].style.display='';
//THIS SEEMS TO WORK. FLIP THE NODE CLICKED ON TO A MINUS SIGN???
if(event && event.type=='click')
n0.style.listStyleImage="url(minus.gif)";
}
}

}
function hideUL(x) {
// Hide UL
if (x.nodeName == 'UL'){
x.style.display='none';
//HOW DO I GET THE OTHER NODES BACK TO A PLUS SIGN???
if(event && event.type=='click')
x.style.listStyleImage="url(plus.gif)";
}

// Recurse down tree, hiding all ULs
for (var j=0; j<x.childNodes.length; ++j) {
hideUL(x.childNodes[j]);
}
}
// Not really needed, see note below
function resetMenu() {
showMenu(document.getElementById("mainmenu"));
}
</script>
</head>
<body>
<ul id="mainmenu">
<li id="level_1"><span onclick="showMenu(this)">Forecast
Maintenance</span>
<ul class="folderheader">
<li id="level_2"><span onclick="showMenu(this)">Input</span>
<ul class="folderheader">
<li id="level_3"><span onclick="showMenu(this)">Quarterly
Maintenance</span>
<ul class="folderheader">
<li id="level_4"><span
onclick="showMenu(this)">Chargeback Recovery
Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">FACT
Period</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecastable Centers</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Forecast
Rates</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Rate
Description
&amp; Job Status</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Yearly
Maintenance</span>
<ul class="folderheader">
<li id="level_4"><span onclick="showMenu(this)">Accounts
For New
Center Setup</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Mass Update</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Accrual
Periods</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Amount
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Autocalculated Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Forecast
Account
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecastable Accounts</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
<li><a href="javascript:">Mass Update</a></li>
<li><a href="javascript:">Clone Records</a></li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Forecasters/Reviewers</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Job
Category</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_4"><span onclick="showMenu(this)">Rates
For Rate Driven
Accounts</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Mass Update</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Relationship Between
Staff/Salary Type &amp; Accrual Basis</span>
<ul class="folderlist">
<li>Add New Record</li>
<li>Edit Records</li>
<li>Clone Records</li>
</ul>
</li>
<li id="level_4"><span
onclick="showMenu(this)">Staff/Salary Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_2"><span onclick="showMenu(this)">Reporting</span>
<ul class="folderheader">
<li id="level_3"><span onclick="showMenu(this)">Forecast
Iteration Log</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Forecast
Period</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
<li id="level_3"><span onclick="showMenu(this)">Forecast
Type</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li id="level_1"><span onclick="showMenu(this)">Ledger
Maintenance</span>
<ul class="folderheader">
<li id="level_2"><span onclick="showMenu(this)">Investment
Segment Translation</span>
<ul class="folderlist">
<li><a href="javascript:">Add New Record</a></li>
<li><a href="javascript:">Edit Records</a></li>
</ul>
</li>
</ul>
</li>
</ul>
<script>
resetMenu();
</script>
</body>
</html>
Jul 23 '05 #8
New Post

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

4
Script to collapse a list
by: Alvaro G Vicario | last post by:
I have a list built on HTML and CSS: <ul> <li>Foo</li> <li>Bar <ul> <li>Gee</li> </ul> </li> </ul>
Javascript
2
Expand and Collapse
by: Jenny | last post by:
My codebehind file contains a lot of sub's. Is there a fast way to expand and collapse them in the VisualStudio? It's really exhausting to collapse them all after opening the project in the...
ASP.NET
0
Treeview - single click expand/collapse with XMLDatasource
by: jim | last post by:
Hi, I have a TreeView control that sits on the MasterPage. All of my other webpages inherit from that Master Page. The Treeview receives it's data using an XMLDataSource that has it's DataFile...
ASP.NET
4
Help needed for a expand-collapse menu
by: Rabel | last post by:
I am not very good at javascript I mostly am a flash developer but I am trying to apply one of our old expanding menus to work for a new site but it doesn't collapse the way I need it to right now...
Javascript
3
How to make a parent node clickable in a collapse menu
by: Irocivan | last post by:
Hello, I download a nice collapse menu for free distribution from the internet. It works very well except that none of the parents nodes are clickable (i.e. when clicking on the parent node, the...
Javascript
1
Treeview won't collapse/expand dynamically
by: pej.odonnell | last post by:
Hello everyone, 2 Issues: 1. When treeview renders all parent nodes are open? I want it to render closed? 2. When I try to collapse programmatically, it does not do anything? I'm using a...
ASP.NET
0
Clarifying creation/destruction of TreeVew.Handle and collapse behaviour
by: Marc Bartsch | last post by:
Hi, I have a WinForms application (C#, VS 2005) that consists of a treeview control and a notify icon. Below is a complete example of this application. The treeview has one root node and one child...
C# / C Sharp
0
Persisting tree node expand/collapse state to cookies - part 2
by: Homer J. Simpson | last post by:
A few weeks ago I asked for suggestions on how to persist a tree's node state to cookies, without causing postbacks on each click in the tree. I had a single .aspx file, with a row of buttons on...
ASP.NET
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Looking to do Android software development, any suggestions? Is flutter better?
by: nemocccc | last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
General
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
marktang
What is ONU?
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
General
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!