need buttons using JavaScript

Posted on 2006-11-27
Last Modified: 2012-08-14

I use a free node tree by Matt Kruse (below), which is working out well for me.  I would like to add a bit of functionality and am not sure how to approach it.

in the frame with the node tree I'd like a few buttons to change the way the tree is displayed.  I'd like 4 buttons called:

Expand                       Larger Font

Collapse                     Smaller Font

I'd like the Expand button to expand all nodes.  I'd like Collape to collapse al nodes  I'd like "Larger Font" to increment the font size for people with a hard time reading.  I'd like "Smaller Font" for people who want the benefit of denser text.

Does this approach make sense?

How would I accomplish this with buttons?  And is there a better way to accomplish this?

Thanks for the help.


// ===================================================================
// Author: Matt Kruse <>
// WWW:
// NOTICE: You may use this code for any purpose, commercial or
// private, without any further permission from the author. You may
// remove this notice from your final code if you wish, however it is
// appreciated by the author if at least my web site address is kept.
// You may *NOT* re-distribute this code in any way except through its
// use. That means, you can include it in your product, or your web
// site, or any other form where the code is actually being used. You
// may not put the plain javascript up on your site for download or
// include it in your javascript libraries for download.
// If you wish to share this code with others, please just point them
// to the URL instead.
// Please DO NOT link directly to my .js files from your site. Copy
// the files to your server and use them there. Thank you.
// ===================================================================

// ------------------------------------------------------------------
// December 9, 2003: Added script to the Javascript Toolbox
// December 10, 2003: Added the preProcessTrees variable to allow user
//      to turn off automatic conversion of UL's onLoad
// March 1, 2004: Changed it so if a <li> has a class already attached
//      to it, that class won't be erased when initialized. This allows
//      you to set the state of the tree when painting the page simply
//      by setting some <li>'s class name as being "liOpen" (see example)
This code is inspired by and extended from Stuart Langridge's aqlist code:
            Stuart Langridge, November 2002
            Inspired by Aaron's labels.js (
            and Dave Lindquist's menuDropDown.js (

// Automatically attach a listener to the window onload, to convert the trees

// Utility function to add an event listener
function addEvent(o,e,f){
      if (o.addEventListener){ o.addEventListener(e,f,true); return true; }
      else if (o.attachEvent){ return o.attachEvent("on"+e,f); }
      else { return false; }

// utility function to set a global variable if it is not already set
function setDefault(name,val) {
      if (typeof(window[name])=="undefined" || window[name]==null) {

// Full expands a tree with a given ID
function expandTree(treeId) {
      var ul = document.getElementById(treeId);
      if (ul == null) { return false; }

// Fully collapses a tree with a given ID
function collapseTree(treeId) {
      var ul = document.getElementById(treeId);
      if (ul == null) { return false; }

// Expands enough nodes to expose an LI with a given ID
function expandToItem(frameId,treeId,itemId) {
      var ul = window.parent.frames[frameId].document.getElementById(treeId);
      if (ul == null) { return false; }
      var ret = expandCollapseList(ul,nodeOpenClass,itemId);
      if (ret) {
            /*var o = document.getElementById(itemId);*/
            var o = window.parent.frames[frameId].document.getElementById(itemId);
            if (o.scrollIntoView) {

// Performs 3 functions:
// a) Expand all nodes
// b) Collapse all nodes
// c) Expand all nodes to reach a certain ID
function expandCollapseList(ul,cName,itemId) {
      if (!ul.childNodes || ul.childNodes.length==0) { return false; }
      // Iterate LIs
      for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
            var item = ul.childNodes[itemi];
            if (itemId!=null && { return true; }
            if (item.nodeName == "LI") {
                  // Iterate things in this LI
                  var subLists = false;
                  for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                        var sitem = item.childNodes[sitemi];
                        if (sitem.nodeName=="UL") {
                              subLists = true;
                              var ret = expandCollapseList(sitem,cName,itemId);
                              if (itemId!=null && ret) {
                                    return true;
                  if (subLists && itemId==null) {
                        item.className = cName;

// Search the document for UL elements with the correct CLASS name, then process them
function convertTrees() {
      if (preProcessTrees) {
            if (!document.createElement) { return; } // Without createElement, we can't do anything
            uls = document.getElementsByTagName("ul");
            for (var uli=0;uli<uls.length;uli++) {
                  var ul=uls[uli];
                  if (ul.nodeName=="UL" && ul.className==treeClass) {

// Process a UL tag and all its children, to convert to a tree
function processList(ul) {
      if (!ul.childNodes || ul.childNodes.length==0) { return; }
      // Iterate LIs
      for (var itemi=0;itemi<ul.childNodes.length;itemi++) {
            var item = ul.childNodes[itemi];
            if (item.nodeName == "LI") {
                  // Iterate things in this LI
                  var subLists = false;
                  for (var sitemi=0;sitemi<item.childNodes.length;sitemi++) {
                        var sitem = item.childNodes[sitemi];
                        if (sitem.nodeName=="UL") {
                              subLists = true;
                  var s= document.createElement("SPAN");
                  var t= '\u00A0'; // &nbsp;
                  s.className = nodeLinkClass;
                  if (subLists) {
                        // This LI has UL's in it, so it's a +/- node
                        if (item.className==null || item.className=="") {
                              item.className = nodeClosedClass;
                        // If it's just text, make the text work as the link also
                        if (item.firstChild.nodeName=="#text") {
                              t = t+item.firstChild.nodeValue;
                        s.onclick = function () {
                              this.parentNode.className = (this.parentNode.className==nodeOpenClass) ? nodeClosedClass : nodeOpenClass;
                              return false;
                  else {
                        // No sublists, so it's just a bullet node
                        item.className = nodeBulletClass;
                        s.onclick = function () { return false; }
var selItem = null;
var selItemClassname;

//Select item function
function selectItem(frameId, treeId, itemId)
      //Reset selected?
            selItem.className = selItemClassname;
      selItem = window.parent.frames[frameId].document.getElementById(itemId);
       selItemClassname = selItem.className;
       selItem.className += " selected";
Question by:newbieweb
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
LVL 23

Accepted Solution

rama_krishna580 earned 500 total points
ID: 18030371

Look at here; you may get some idea how to do it...


Author Comment

ID: 18033922
thanks for that page.  I was actually more looking for the way to use JavaScript to create buttons.

I'd like them to be at the bottom of a frame, in a two by two matrix.

Can anybody show me?


Featured Post

What Is Transaction Monitoring and who needs it?

Synthetic Transaction Monitoring that you need for the day to day, which ensures your business website keeps running optimally, and that there is no downtime to impact your customer experience.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

690 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question