Accordian Menu with advanced options question...

Accordian Menu with advanced options question...

I have a webpage that I have integrated a script for an accordian menu. I need to know if I can make the headers that currently open a specified page in an iframe while also opening the accordian submenu, to open the same specified page when you clcik again on the header to close the accordian menu. Currently the header closes the submenu only. Is this possible? I have provided as much detail as I could think of. I am by no means a programmer but I get around well in coding.
 
 
I have my page linked to jQuery this way...
 
  1. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
The script also calls out a file called ddacordian.js
  1.  <script type="text/javascript" src="ddaccordion.js">
Link for ddacordian.js file is:
 
Here is the script code for the menu included in the htm page.
  1. <script type="text/javascript">
  2. ddaccordion.init({
     headerclass: "submenuheader", //Shared CSS class name of headers group
     contentclass: "submenu", //Shared CSS class name of contents group
     revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
     mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
     collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
     defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
     onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
     animatedefault: false, //Should contents open by default be animated into view?
     persiststate: false, //persist state of opened contents within browser session?
     toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
     togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
     animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
     oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
      myiframe=window.frames["myiframe"]
      if (expandedindices.length>0) //if there are 1 or more expanded headers
       myiframe.location.replace(headers[expandedindices.pop()].getAttribute('href')) //Get "href" attribute of final expanded header to load into IFRAME
     },
     onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
      if (state=="block" && isuseractivated==true){ //if header is expanded and as the result of the user initiated action
       myiframe.location.replace(header.getAttribute('href'))
      }
     }
    })






















  3. </script>

 Here is the style code for the menu:

    <style type="text/css">

    .glossymenu{
     border-left: 0px solid #9A9A9A;
     border-right: 0px solid #9A9A9A;
     border-top: 0px solid #9A9A9A;
     border-bottom: 0px solid #9A9A9A;
     margin: 5px 0;
     padding: 0;
     width: 257px;
     font-family: Tahoma, Arial;
    }








    .glossymenu a.menuitem{
    background: black url('glossyback.gif') repeat-x left bottom;
    font: bold 14px Tahoma, Arial;
    color: black;
    display: block;
    position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
    width: auto;
    padding-left: 10px;
    text-decoration: none;
     text-align: left;
     padding-right: 0;
     padding-top: 4px;
     padding-bottom: 4px;
    }













    .glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
    color: black;
    }


    .glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
    position: absolute;
    top: 5px;
    right: 5px;
    border: none;
    }




    .glossymenu a.menuitem:hover{
    background-image: url(glossyback2.gif);
    font: bold 14px Tahoma, Arial;
    color: white;


    }

    .glossymenu div.submenu{ /*DIV that contains each sub menu*/
    background: white;
    }

    .glossymenu div.submenu ul{ /*UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    }



    .glossymenu div.submenu ul li{
    border-bottom: 1px solid blue;
    }

    .glossymenu div.submenu ul li a{
    display: block;
    font: normal 13px Tahoma, Arial;
    color: black;
    text-decoration: none;
    padding-left: 10px;
     text-align: left;
     padding-right: 0;
     padding-top: 2px;
     padding-bottom: 2px;
    }









    .glossymenu div.submenu ul li a:hover{
    background: #DFDCCB;
    colorz: white;
    }


    .style1 {
     border: 1px solid #333333;
    }

    #CC2078952 {
     height: 215px;
     width: 260px;
     float: middle;
    }



    .style2 {
     border: 1px solid #7D9EB0;
    }

</style>
 
Here is the html code for the menu links coded as they would be on my page:
 
  <div class="glossymenu">
<a class="menuitem" href="inline_headerone.htm">HEADER ONE</a>
<a class="menuitem submenuheader" href="inline_headertwo.htm">HEADER TWO</a>
<div class="submenu">
 <ul>
 <li><a href="sub_link1.htm">H2 SUB ONE</a></li>
 <li><a href="sub_link2.htm">H2 SUB TWO</a></li>
 <li><a href="sub_link3.htm">H2 SUB TRHEE</a></li>
 </ul>
</div>
<a class="menuitem submenuheader" href="inline_headerthree.htm">HEADER THREE</a>
<div class="submenu">
 <ul>
 <li><a href="sub_h3_link1.htm">H3 SUB ONE</a></li>
 <li><a href="sub_h3_link2.htm">H3 SUB TWO</a></li>
 <li><a href="sub_h3_link3.htm">H3 SUB THREE</a></li>
 </ul>
 </div>
 </div>


















I am really hoping that to get the header to open a specified page when it opens the accordian sub menu and when it closes the accordian submenu in the iframe.
 
Thanks

Jack