troubleshooting Question

Java Accordian Menu

Avatar of greep
greep asked on
JavaHTMLJSP
2 Comments1 Solution5709 ViewsLast Modified:
Hi, I'm new to Java and I'm trying to adapt an Accordion Menu created by someone else.

In the HTML below, I've added the Calculations section at the bottom, and it's working well.

However, I'd like the add a further level of sub menu.

For example, under the Calculations > Level 100+ Menu, there are 3 'Transfer Out' links, I would like to add an extra level, so Calculations >Level 100+ >Transfer Out  would then reveal the three 'Transfer Out links.

But, I can't get it to work - Help please someone
Thanks


HTML CODE

<html>
<head>
<title>Accordion menu sample</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<link rel="stylesheet" href="styles/Nav_Menu_Style.css">
<script type="text/javascript">
 

function changeOpenmenu(ids){
 
 var idsArray =  new Array();
 idsArray = ids.split(",");
 
 var all_uls = new Array();
 

 all_uls[0]='ul_two';
 all_uls[1]='ul_three';
 all_uls[2]='ul_subthree';
 all_uls[3]='ul_subone';
 all_uls[4]='ul_subtwo';
 all_uls[5]='ul_subfour';
 all_uls[6]='ul_subfive';
 all_uls[7]='ul_subsix';
 all_uls[8]='ul_subseven';
 all_uls[9]='ul_subeight';
 all_uls[10]='ul_four';
 all_uls[11]='ul_subnine';
 all_uls[12]='ul_subten';
 
 
 
 for(i=0;i<all_uls.length;i++){
  document.getElementById(all_uls[i]).style.display = 'none';
 }
 
 for(i=0;i<idsArray.length;i++){
  var the_ul = document.getElementById(idsArray[i].toString());
  the_ul.style.display = 'block';
 }
 
 clearButtons();
}
 
function clearButtons() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
 var anchor = anchors[i];
 anchor.blur();
 }
}
</script>
</head>
 
<body bgcolor="bfe2f9";>
<div id="container">
<div id="menu">
<ul id="main">
<li id="li_two"><a href="javascript:changeOpenmenu('ul_three')">Process maps</a>
 <ul class="sub" id="ul_three">
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subthree')">Main</a>
   <ul class="subsub" id="ul_subthree">
      <li><a href="#">TV IN</a></li>
      <li><a href="#">TV OUT</a></li>
      <li><a href="#">Retirements</a></li>
      <li><a href="#">Death</a></li>
   </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subone')">Exec</a>
       <ul class="subsub" id="ul_subone">
          <li><a href="#">TV IN</a></li>
          <li><a href="#">TV OUT</a></li>
          <li><a href="#">Retirements</a></li>
          <li><a href="#">Death</a></li>
       </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subtwo')">RO</a>
       <ul class="subsub" id="ul_subtwo">
          <li><a href="#">TV IN</a></li>
          <li><a href="#">TV OUT</a></li>
          <li><a href="#">Retirements</a></li>
          <li><a href="#">Death</a></li>
       </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subfour')">Aircrew</a>
       <ul class="subsub" id="ul_subfour">
          <li><a href="#">TV IN</a></li>
          <li><a href="#">TV OUT</a></li>
          <li><a href="#">Retirements</a></li>
          <li><a href="#">Death</a></li>
       </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subfive')">L100+</a>
         <ul class="subsub" id="ul_subfive">
            <li><a href="#">TV IN</a></li>
            <li><a href="#">TV OUT</a></li>
            <li><a href="#">Retirements</a></li>
            <li><a href="#">Death</a></li>
         </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subsix')">P2000</a>
           <ul class="subsub" id="ul_subsix">
              <li><a href="#">TV IN</a></li>
              <li><a href="#">TV OUT</a></li>
              <li><a href="#">Retirements</a></li>
              <li><a href="#">Death</a></li>
           </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subseven')">EADS</a>
             <ul class="subsub" id="ul_subseven">
                <li><a href="#">TV IN</a></li>
                <li><a href="#">TV OUT</a></li>
                <li><a href="#">Retirements</a></li>
                <li><a href="#">Death</a></li>
             </ul>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_three,ul_subeight')">Avionics</a>
               <ul class="subsub" id="ul_subeight">
                  <li><a href="#">TV IN</a></li>
                  <li><a href="#">TV OUT</a></li>
                  <li><a href="#">Retirements</a></li>
                  <li><a href="#">Death</a></li>
               </ul>
  </li>
 </ul>
 
</li>
 
<li id="li_home"><a href="javascript:changeOpenmenu('ul_two');">Procedures</a>
   <ul class="sub" id="ul_two">
     <li><a href="#">Main</a></li>
     <li><a href="#">RO</a></li>
     <li><a href="#">Exec</a></li>
     <li><a href="#">L100+</a></li>
     <li><a href="#">P2000</a></li>
     <li><a href="#">EADS Astrium</a></li>
     <li><a href="#">Avionics</a></li>
 
   </ul>
</li>
 

<li id="li_two"><a href="javascript:changeOpenmenu('ul_four')">Calculations</a>
 <ul class="sub" id="ul_four">
  <li><a href="javascript:changeOpenmenu('ul_four,ul_subnine')">Main Scheme</a>
   <ul class="subsub" id="ul_subnine">
      <li><a href="#">Deferred Data Checker</a></li>
      <li><a href="#">Discounted GMP Calculator</a></li>
      <li><a href="#">Retirement From Deferred</a></li>
   </ul>
  </li>
  </li>
  <li><a href="javascript:changeOpenmenu('ul_four,ul_subten')">L100+</a>
         <ul class="subsub" id="ul_subten">
      <li><a href="#">Transfer Out</a></li>
      <li><a href="#">Transfer Out - 2 Periods of Service</a></li>
      <li><a href="#">Transfer Out - Divorce</a></li>
         </ul>
  </li>
 </ul>
 
</li>
 

</ul>
</div>
</div>
</body>
</html>


and here is the code from the linked CSS file


*{margin:0;padding:0;}
#container{width:510px; }
#menu{width:150px;background:#123;font:0.8em/1.7 Tahoma, Verdana, sans-serif;margin-right:10px; }
#text{float:right;width:300px;font-size:1.0em;background:#A75B2E;border:2px solid #ccc;}
#text p{padding:5px 20px;}
a{display:block;text-decoration:none; width:100%;line-height:20px;}
ul{ text-align:left;list-style-image: url("Images\Arrow.gif");list-style-type: square;}
li{display:inline;}
 

#main li a:link,ul#main li a:visited {background:#bfe2f9;color:#000080;border-bottom:2px solid #eee;font-weight: bold; font-size: 13px;

padding-left: 5px;}
#main li a:link:hover,ul#main li a:visited:hover {background:#aeb5bd;font-weight: bold; font-size: 13px; padding-left: 5px;}
 
 
 
#ul_one, #ul_two, #ul_three, #ul_four, #ul_five, #ul_six, #ul_seven, #ul_eight,
#ul_subsubone,
#ul_subone, #ul_subtwo, #ul_subthree,ul_eight_sub {display:none;}
 
ul#main li ul.sub li a:link,ul#main ul.sub li a:visited {border-bottom:2px solid #eee;background:#49bdef;color:#333;font-weight:

bold;font-size: 12px;padding-left: 8px;}
ul#main li ul.sub li a:link:hover,ul#main ul.sub li a:visited:hover {background:#123;color:#fff;font-weight: bold;font-size: 12px;

padding-left: 8px;}
 
ul#main li ul.subsub li a:link,ul#main ul.subsub li a:visited {border-bottom:2px solid;background:#005073;color:aqua;font-weight:

bold;font-size: 11px;padding-left: 11px;}
ul#main li ul.subsub li a:link:hover,ul#main ul.subsub li a:visited:hover {background:black;color:white;font-weight: bold; font-size:

11px;padding-left: 11px;}
 
 


ASKER CERTIFIED SOLUTION
Join our community to see this answer!
Unlock 1 Answer and 2 Comments.
Start Free Trial
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 2 Comments.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros