simple tree menu - slight adaptation

[vickym]

1) Script Title: Simple Tree Menu

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex1/navigate1.htm

3) Describe problem:

This is a great script, but I need to slightly modify it, and as I'm lost with .js, I'm hoping that someone may be able to point me in the right direction.

The script works fantastically on my draft page (http://www.cyrrus.co.uk/capabilities.php), but I need to be able to expand all subfolders when the first level is clicked upon. At the moment, the user needs to click on each lower level to expand them. So for example, when the ATM item is clicked, the Control Tower and Airfield Operation items should also open.

I'm sure it's just a tweak to the .js file, and although I have tried a couple of adaptations, none of them work (I'm basically just taking a stab in the dark with it). The .js and .css files on this page are now unaltered from the original script.

Any ideas/help would be greatly appreciated.

Many thanks

Vicky

[jscheuer1]

First let's clean up the page a bit. The jQuery library is not associated with it, so get rid of this:

	<script type="text/javascript">
	$(document).ready(function(){
		$('ul.quickTree').quickTree();
	});	
	</script>

You have no treemenu2, so get rid of this (highlighted):

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

Now, it appears to be simple to get the effect you want. In this section of your markup, add the highlighted:

        <li><strong onclick="ddtreemenu.flatten('atm', 'expand');">Air Traffic Management (ATM)</strong>
            <ul id="atm">
              <li>Control Tower
                <ul>
                    <li>User Requirements</li>
                  <li>Regulatory requirements compliance</li>

                  <li>Equipment Specifications</li>
                  <li>Safeguarding</li>
                  <li>Interoperability</li>
                </ul>
              </li>
              <li>Airfield Operation
                <ul>
                    <li>Technical Systems</li>

                  <li>Processes</li>
                  <li>Procedures</li>
                </ul>
              </li>
			  <p>View our <a href="ATM_project_management.php">ATM Project Management</a> page</p>
            </ul>

        </li>

[vickym]

John, you're a marvel. Thank you so much! I cleaned out the code which you suggested, and it didn't work at all, so I reinstated it all, included your amends, and now it works like a dream. I'm just going through and implementing it for all the other items. Thank you so much for your help - i would never have managed that on my own.
All the best
Vicky

[jscheuer1]

You must have cleaned out the code incorrectly. Most likely you removed all of this:

<script type="text/javascript">

//ddtreemenu.createTree(treeid, enablepersist, opt_persist_in_days (default is 1))

ddtreemenu.createTree("treemenu1", true)
ddtreemenu.createTree("treemenu2", false)

</script>

not just the highlighted as suggested. But you may have made some other syntax error. I know it works with my recommendations (including what should be removed) because I tested it. In fact, if you don't remove what I suggested be removed, the page will have errors.

Anyways, I also found a simpler method for achieving the objective, and edited my previous post to reflect that:

        <li><strong onclick="ddtreemenu.flatten('atm', 'expand');">Air Traffic Management (ATM)</strong>
            <ul id="atm">
              <li>Control Tower
                <ul>
                    <li>User Requirements</li>
                  <li>Regulatory requirements compliance</li>

                  <li>Equipment Specifications</li>
                  <li>Safeguarding</li>
                  <li>Interoperability</li>
                </ul>
              </li>
              <li>Airfield Operation
                <ul>
                    <li>Technical Systems</li>

                  <li>Processes</li>
                  <li>Procedures</li>
                </ul>
              </li>
			  <p>View our <a href="ATM_project_management.php">ATM Project Management</a> page</p>
            </ul>

        </li>

[vickym]

Crikey - you're quick. Yes, you were right - i had cleared out the code incorrectly. And your new simpler version is great. I have just implemented the previous version throughout the page, so am just going through now and switching them to your new suggestion to keep the code simpler.

Many thanks once again - I think you're a genius.

Kind regards

Vicky