Accordian menu

Sorry to say I need to post here and anyone interested in helping each other out should add their two cents.
You probably know Suzanne Boben (Sboben) of 11 Mystics (not sure which Mystic she is-----million dollar question) has created a tutorial on this javascript/Ajax menu deal. That is frankly the hotest AND coolest thing around.
She has done a great job...but my question is how is the ID generated here:
h2 class="sectionTitle">Menu 1
div id="4462425" class="sectionContent"
Other than that I think I can learn about CSS on my own (somewhat at least). Here is my effort so far. I hope others post so we can help each other out.
This is just a goofy trial mock up to experiment with:
http://web.mac.com/abenningfield/iWeb/Jabberwocky/Home.html
The future of iWeb!!!!!!!!!!!!!!!

hey you know what - I don't think you don't need that ID on the divs... when I was troubleshooting the .Mac installation, I must have fixed the issue and also added the ID to the div but didn't realize it wasn't the div id that fixed the problem - I must have done something else at the same time.
At any rate, don't fret over the ID. If you want to extend the CSS to that content area, then the ID can be useful. Otherwise, fo-get abot it.

Similar Messages

  • Links not working in Spry Accordian Menu

    When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
    HEAD TAGS:
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <link href="content.css" rel="stylesheet" type="text/css" />
    HTML:
    <div id="navSide">
        <div id="sideWrapper">
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows &amp; Doors</a></div>
              <div class="AccordionPanelContent"></div>
              </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
              <div class="AccordionPanelContent">
                <ul>
                  <li><a href="residential.php">Residential</a></li>
                  <li><a href="commercial.php">Commercial</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
    </script>
    external CSS:
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
        border: 1px solid #CCC;
        width: 145px;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        background-color: #F2F2F2;
        margin: 0px;
        padding: 12px;
        cursor: pointer;
        font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #0071BC;
        border-bottom: 1px solid #CCC;
        /* [disabled]text-transform: uppercase; */
    .AccordionPanelTab a {
        text-decoration:none;
        color: #0071BC;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
    .AccordionPanelContent ul {
        list-style-type:none;
        margin:0;
        line-height: 22px;
        font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
    .AccordionPanelContent ul li {
        color:#666;
    .AccordionPanelContent ul li a {
        display:block;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 5px;
        padding-left: 0px;
    .AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
        text-decoration:none;
        color:#0071BC;
    .AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
        color:#FF9900;
    .AccordionPanelTab a:link, .AccordionPanelTab a:visited {
        color:#0071BC;
    .AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
        color:#FF9900;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #FFFFFF;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        /* [disabled]background-color: #3399FF; */
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        /* [disabled]background-color: #33CCFF; */
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;

    When clicked the links in the left side accordian menu do not work. However, the child-links work great. Example: http://www.richartbuilders.com/remodel.php
    HEAD TAGS:
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script>
    <link href="SpryAssets/SpryMenuBarHorizontal2.css" rel="stylesheet" type="text/css" />
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css" />
    <link href="content.css" rel="stylesheet" type="text/css" />
    HTML:
    <div id="navSide">
        <div id="sideWrapper">
          <div id="Accordion1" class="Accordion" tabindex="0">
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../remodel.php">Remodel</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../windowsdoors.php">Windows &amp; Doors</a></div>
              <div class="AccordionPanelContent"></div>
              </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="../weatherization.php">Weatherization</a></div>
              <div class="AccordionPanelContent"></div>
             </div>
            <div class="AccordionPanel">
              <div class="AccordionPanelTab"><a href="#">Electrical...</a></div>
              <div class="AccordionPanelContent">
                <ul>
                  <li><a href="residential.php">Residential</a></li>
                  <li><a href="commercial.php">Commercial</a></li>
                </ul>
              </div>
            </div>
          </div>
        </div>
    </div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1" ,{ useFixedPanelHeights:false, defaultPanel:0});
    </script>
    external CSS:
    @charset "UTF-8";
    /* SpryAccordion.css - version 0.5 - Spry Pre-Release 1.6.1 */
    /* Copyright (c) 2006. Adobe Systems Incorporated. All rights reserved. */
    /* This is the selector for the main Accordion container. For our default style,
    * we draw borders on the left, right, and bottom. The top border of the Accordion
    * will be rendered by the first AccordionPanelTab which never moves.
    * If you want to constrain the width of the Accordion widget, set a width on
    * the Accordion container. By default, our accordion expands horizontally to fill
    * up available space.
    * The name of the class ("Accordion") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style the
    * Accordion container.
    .Accordion {
        overflow: hidden;
        border: 1px solid #CCC;
        width: 145px;
    /* This is the selector for the AccordionPanel container which houses the
    * panel tab and a panel content area. It doesn't render visually, but we
    * make sure that it has zero margin and padding.
    * The name of the class ("AccordionPanel") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel container.
    .AccordionPanel {
        margin: 0px;
        padding: 0px;
    /* This is the selector for the AccordionPanelTab. This container houses
    * the title for the panel. This is also the container that the user clicks
    * on to open a specific panel.
    * The name of the class ("AccordionPanelTab") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel tab container.
    * NOTE:
    * This rule uses -moz-user-select and -khtml-user-select properties to prevent the
    * user from selecting the text in the AccordionPanelTab. These are proprietary browser
    * properties that only work in Mozilla based browsers (like FireFox) and KHTML based
    * browsers (like Safari), so they will not pass W3C validation. If you want your documents to
    * validate, and don't care if the user can select the text within an AccordionPanelTab,
    * you can safely remove those properties without affecting the functionality of the widget.
    .AccordionPanelTab {
        background-color: #F2F2F2;
        margin: 0px;
        padding: 12px;
        cursor: pointer;
        font-family: "Myriad Pro", Verdana, Geneva, sans-serif;
        font-size: 14px;
        color: #0071BC;
        border-bottom: 1px solid #CCC;
        /* [disabled]text-transform: uppercase; */
    .AccordionPanelTab a {
        text-decoration:none;
        color: #0071BC;
    /* This is the selector for a Panel's Content area. It's important to note that
    * you should never put any padding on the panel's content area if you plan to
    * use the Accordions panel animations. Placing a non-zero padding on the content
    * area can cause the accordion to abruptly grow in height while the panels animate.
    * Anyone who styles an Accordion *MUST* specify a height on the Accordion Panel
    * Content container.
    * The name of the class ("AccordionPanelContent") used in this selector is not necessary
    * to make the widget function. You can use any class name you want to style an
    * accordion panel content container.
    .AccordionPanelContent {
        overflow: auto;
        margin: 0px;
        padding: 0px;
    .AccordionPanelContent ul {
        list-style-type:none;
        margin:0;
        line-height: 22px;
        font-family:"Myriad Pro", "Trebuchet MS", Arial, Helvetica, sans-serif;
        font-size:14px;
    .AccordionPanelContent ul li {
        color:#666;
    .AccordionPanelContent ul li a {
        display:block;
        padding-top: 5px;
        padding-right: 0px;
        padding-bottom: 5px;
        padding-left: 0px;
    .AccordionPanelContent ul li a:link, .AccordionPanelContent ul li a:visited {
        text-decoration:none;
        color:#0071BC;
    .AccordionPanelContent ul li a:hover, .AccordionPanelContent ul li a:active {
        color:#FF9900;
    .AccordionPanelTab a:link, .AccordionPanelTab a:visited {
        color:#0071BC;
    .AccordionPanelTabHover a:hover, .AccordionPanelTabHover a:active {
        color:#FF9900;
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open. The class "AccordionPanelOpen" is programatically added and removed
    * from panels as the user clicks on the tabs within the Accordion.
    .AccordionPanelOpen .AccordionPanelTab {
        background-color: #FFFFFF;
    /* This is an example of how to change the appearance of the panel tab as the
    * mouse hovers over it. The class "AccordionPanelTabHover" is programatically added
    * and removed from panel tab containers as the mouse enters and exits the tab container.
    .AccordionPanelTabHover {
    .AccordionPanelOpen .AccordionPanelTabHover {
        color: #555555;
    /* This is an example of how to change the appearance of all the panel tabs when the
    * Accordion has focus. The "AccordionFocused" class is programatically added and removed
    * whenever the Accordion gains or loses keyboard focus.
    .AccordionFocused .AccordionPanelTab {
        /* [disabled]background-color: #3399FF; */
    /* This is an example of how to change the appearance of the panel tab that is
    * currently open when the Accordion has focus.
    .AccordionFocused .AccordionPanelOpen .AccordionPanelTab {
        /* [disabled]background-color: #33CCFF; */
    /* Rules for Printing */
    @media print {
      .Accordion {
      overflow: visible !important;
      .AccordionPanelContent {
      display: block !important;
      overflow: visible !important;
      height: auto !important;

  • Linking accordian menu

    I want to lik the images and swf to local files but I'm not able to do so. Could you please tell me how?
    I took the code from an accordian menu tutorial
    This is the xml code
    <?xml version="1.0" encoding="utf-8"?>
      <menu menuOpen="1" moveOnMouseOver="false">
                 <item Ititle="home" IcontentType="image/swf" IcontentData="image2.jpg"/>
               <item Ititle="about" IcontentType="text" IcontentData="Our company is based on UK! Know how we have born!; Click here"/>
                 <item Ititle="Products" IcontentType="image/swf" IcontentData="image5.jpg"/>
               <item Ititle="Services" IcontentType="image/swf" IcontentData="item2.swf"/>
               <item Ititle="Contact" IcontentType="image/swf" IcontentData="image1.jpg"/>
      </menu>
    This is the AS code
    //import tweenlite classes
      import gs.TweenLite;
      import gs.easing.*;
      var MENU_ARRAY:Array; //used to save the items data
      var OPENED_MENU:int; //to inform the menu that should be open at startup
      var MOVE_ON_MOUSE_OVER:Boolean=false; //tha name says everything
      var xmlLoader:URLLoader; //the xml loader
    loadXML("menu.xml"); //load the xml
    function loadXML(Uri:String):void {
      xmlLoader = new URLLoader();
      xmlLoader.addEventListener(Event.COMPLETE, onComplete);
      xmlLoader.addEventListener(IOErrorEvent.IO_ERROR, onError);
      xmlLoader.load(new URLRequest(Uri));
    function onError(evt:ErrorEvent):void {
      trace("cannot load xml file");
    function onComplete(evt:Event):void {
      //read and load xml into array, by parsing it using prepareMenu
      MENU_ARRAY=prepareMenu(xmlLoader.data.toString());
      placeItemsOnStage(); //place all required items on stage.
    function placeItemsOnStage():void {
         var pos:Number=0;
      //define the container properties
      menuContainer.x=0;
      menuContainer.y=0;
         for(var c:int=0; c<MENU_ARRAY.length; c++) {
           var it:menuItem = new menuItem; //load out menuItem, because its exported to AS, we can use it here
                it.x=c*27; //its the gray border width
                it.y=0; //place on top
                it.id="Item-"+c; //id the menuItem
                it.name="Item-"+c; //name de menuItem
                it.posX=pos; //actual pos, useful to open and know is position
                it.itemLabel.text=String(MENU_ARRAY[c].Ititle).toUpperCase(); //load the label in uppercase
                it.addEventListener(MouseEvent.CLICK, onMouseClick); //add mouse click listener
                if(MOVE_ON_MOUSE_OVER==true) it.addEventListener(MouseEvent.MOUSE_OVER, onMouseOver); //if configured, load the mouse over event
                it.useHandCursor=true;  //use hand cursor
                it.buttonMode=true; //buttonMode
                it.itemText.visible=false; //hide the textField
                menuContainer.addChild(it); //add the menu item as child
               if(String(MENU_ARRAY[c].IcontentType)=="image/swf")     { //check the content and load things accordint to it
                     var ldr:Loader = new Loader();
                     ldr.x=27;
                   ldr.y=0;
                     it.addChild(ldr);
                     ldr.load(new URLRequest(MENU_ARRAY[c].IcontentData.toString()));
              else if(String(MENU_ARRAY[c].IcontentType)=="text") {
                     it.itemText.visible=true;
                     it.itemText.text=MENU_ARRAY[c].IcontentData.toString();
         pos+=27; //the next menuItem x position
    //put mask in place
      masker.width=(MENU_ARRAY.length*27+325)
      masker.height=menuContainer.height;
      masker.x=0;
      masker.y=0;
    moveItem(OPENED_MENU-1); //open menu confirured in XML
      function onMouseOver(evt:MouseEvent):void {
           if(evt.target.name.toString()=="buttonBack") prepareMove(evt)
    function prepareMove(evt:MouseEvent):void {
      var targetName:String = evt.currentTarget.name.toString(); //get the menuItem
      var temp:Array = targetName.split("-"); //split his name: Item-x
      var itemNumber:int=(temp[1]); //got item number
      moveItem(itemNumber); //move it
    function onMouseClick(evt:MouseEvent):void {
      if(evt.target.name.toString()=="buttonBack")  prepareMove(evt); //mouse action was done in buttonBack
      else trace("Item "+evt.currentTarget.name+" clicked!"); //mouse action was made on accordion area
    function moveItem(num:int):void {
      var itemToMove:menuItem=menuContainer.getChildByName("Item-"+String(num)) as menuItem;
      //get the menuItem child
      for(var m=0;m<MENU_ARRAY.length;m++) //move one-by-one to the new position
      var tempMc = menuContainer.getChildByName("Item-"+m);
      if(tempMc.x > itemToMove.x) TweenLite.to(tempMc, 1, {x:((tempMc.posX) + itemToMove.width-27), ease:Quart.easeOut}); //see tweenLite for info about this.
      else if(tempMc.x <= itemToMove.x) TweenLite.to(tempMc, 1, {x:(tempMc.posX), ease:Quart.easeOut});
    function prepareMenu (XMLData:String):Array
      //make sure it cames in XML
      var menuXML:XML = new XML(XMLData);
      //just in case
      menuXML.ignoreWhitespace = true;
      //get XML item's entrys
      var XMLItems = menuXML.descendants("item");
    //load all items into an array
      var itemsArray:Array = new Array();
      var itemObj:Object;
      for(var i in XMLItems)
      itemObj=new Object();
      itemObj.Ititle=XMLItems[i].@Ititle;
      itemObj.IcontentType=XMLItems[i].@IcontentType;
      itemObj.IcontentData=XMLItems[i].@IcontentData;
      itemObj.itemID="menu"+i;
      itemsArray.push(itemObj);
      OPENED_MENU=menuXML.@menuOpen; //get menu for open.
      MOVE_ON_MOUSE_OVER=([email protected]()=="true" ? true : false); //get the option for load or not mouseOver open
      return itemsArray;
    //finish.
    stop();

    Bring up this post! I am also inquiring something similiar in another thread http://forums.adobe.com/message/3855478#3855478
    Thanks peeps!

  • Using a Stacked Bar Chart With an Accordian Menu

    I am having difficulty using a stacked bar chart with an accordian menu. I am able to have one stack bar populate but the other four stays blank. There seems to be an issue with my destination. I dont think it likes that my destination is more than one row and one column. Is there a way to fix this?

    Hello,
    I think there may be an issue in how your model/Accordion Menu was configured.  What insert option are you using?  Your destination should only be 'one' row OR 'one' column at the most.
    Thanks,
    AJ

  • Using Dynamic Visibility with Accordian Menu

    Hiya.  I am trying to use dynamic visibility with an accordian menu.  My menu categories are years, 2005 - 2010. My categories items are key performance indicators such as abandon percentage,  first call resolution, customer satisfaction percentage, call volume and average speed of answer. 
    Of my 6 KPIs, 4 display as percentages and 2 display as whole numbers.  When the percentage graphs are displayed the axis labels needs to be percentages.   When the whole number graphs are displayed the axis label needs to show whole numbers.
    I thought to achieve this I should use dynamic visibility with two different line charts where one line chart shows percentages and the other line chart shows whole numbers.   However I am strugging trying to make that happen.
    Is my concept correct, or is there an easier way to accomplish this?  If my concept is correct,can someone give me some advice on how to make dynamic visibility display the correct chart depending on which KPI I select from my accordian menu?
    Thanks!

    Hi
    You can achieveby doing following steps..
    Insert your categories into D3 and label bind to E3.
    take two charts and bind to the destination data of Accordion menu
    then write a formula in F3 like this =IF(OR(E3="abandon percentage",E3="customer satisfaction percentage"),1,0)
    and bind your two charts to the F3 and set DV for % charts as 1 and # charts as 0.
    I hope this will helps you
    Thanks,
    Srinivas Dandamudi.

  • Problems with accordian menu, look familiar?

    I just upgraded to SP3, and although I have never used the accordian menu, I think I know what it should look like, but since I upgraded, something seems broken.
    When I go to the accordian menu (properties), all that is available in the menu area is "General", and the only options are "Name", "Value" and "Bind" in the header of the columns.
    Can anyone tell me what I have done?
    Many thanks,
    Johnny

    Hi:
       For Accordion Menu, there should be three tabs under property sheet, General, Behavior, Appearance. Also this component should be only available for Xcelsius Engage, and Enterprise version.
       You can try to reinstall Xcelsius to see whether it is the installation problem.

  • Copy an accordian menu

    is it possible to copy an accordian menu onto a new page, i
    would just save it as a new page but I want to change the language
    of the menu and therefor the template for the other page is
    completely different. So I would like to copy the english menu onto
    the spanish page and then just go through and change the
    text.

    Hello,
    I think there may be an issue in how your model/Accordion Menu was configured.  What insert option are you using?  Your destination should only be 'one' row OR 'one' column at the most.
    Thanks,
    AJ

  • Dynamic Accordian Menu - Stay Open?

    Hi,
    I've developed an accordian menu seen on left hand side here:
    http://quarsh.worldsecuresystems.com/
    Managed to get it all working so that when the top item is clicked it opens the submenus and other items without submenus remain as standard links.
    I would now like to be able to force the submenu items to stay open if possible. It's acceptable to have to put some special code in relative areas in the dynamic menu editor or in templates.
    Anyone got any pointers?
    Many thanks,
    Tom

    Hello Tom,
    If you want to keep the submenu open when you are on those pages you should just need some css.
    For the hidden ul, when we are within the "What We Do" section would just be:
    #nav ul li.selected ul{
         display: block;
    You will still be able to click the "what we do" link to make the ul hide, but it will show on page load.
    Hope this helps,
    Chad Smith | http://bcgurus.com/Business-Catalyst-Templates for only $7

  • Accordian menu, need help...

    Heya,
    So I am working on a design that I want to use the accordian
    style menu. I'd be willing to use the Flash component but I
    honestly have never successfully used a component before because I
    can't seem to understand how they require any less effort than just
    building them yourself.
    Example:
    http://owasbhat.com/_blog/2004/08/skinning-v2-components.html
    I tried using simple rollover rollout functions but I get
    unusual problems, can anyone help?

    Figured it out. I couldn't understand what or how the
    actionscript was measuring the height of the collapse, it turns out
    that it measures it by the height graphic that I give an instance
    name of 'title' to. Which was a png that had about 20px of artboard
    that cause that initial gap. Thanks guys!

  • Desktop Site Not Loading Images or Accordian Menu

    I have exported my site files and uploaded them to my server in a folder and the Desktop version is not loading properly. There are a lot of pages, so I haven't reviewed them all just yet, but it appears that the mobile version is working fine. For the Desktop version though, the images aren't loading in both Firefox and Chrome. The accordion menu is also not loading properly and the parallax scrolling isn't working. It had worked when I had only loaded the Desktop portion of the site but now it is not. It is also throwing me the following errors:
    Asset C:\Users\CHRISTIE-PC\AppData\Local\Temp\InDesign Snippets\Snippet_308B7BE0B.idms was not exported because it was not found.
    Asset C:\Users\CHRISTIE-PC\AppData\Local\Temp\InDesign Snippets\Snippet_308E4BBD2.idms was not exported because it was not found.
    Asset C:\Users\CHRISTIE-PC\AppData\Local\Temp\InDesign Snippets\Snippet_308E4BBDB.idms was not exported because it was not found.
    Asset C:\Users\CHRISTIE-PC\AppData\Local\Temp\InDesign Snippets\Snippet_30944F9B2.idms was not exported because it was not found.
    Connection to PHP file failed. Unable to check if this web server supports PHP needed by Muse forms. Be sure the domain name entered in the FTP upload dialog is correct.
    Thank you in advance for your help.
    Here is a link:
    HomeSquare Scrub

    I finally stumbled on a related forum post. It seems it was a permissions setting. I contacted my hosting company and they reset the permissions. I am however still receiving the errors referencing the snippets.

  • Sub menu in accordian menu

    I'm trying to set up a mobile accordion menu with sub menus for my site using the widgets in muse. When I click on the top menu button it brings up another accordion menu it looks like. It is on the right side of the button not under the button where I would prefer. Also it doesn't shift the other top level buttons below it when it is open. Any solutions?

    If I use state buttons under the second accordion they do not react to it (facilities button does not move down when the services accordion is expanded)

  • Accordian menu not collapsing entirely, need help...

    Heya,
    So if you click on Capital Strategies group on this page:
    http://juice-t.firetree.us
    you'll find a .swf file that has a collapsable menu (accordion
    menu). Everything works great except for two problems:
    1. There is some sort of wierd masking occuring that's
    clipping the bottom of the menu as you'll see.
    2. The items don't collapse entirely.
    I assume this has something to do with actionscript but as
    I'm sifting through it I'm just not having much luck. Can anyone
    help? Thanks!

    Figured it out. I couldn't understand what or how the
    actionscript was measuring the height of the collapse, it turns out
    that it measures it by the height graphic that I give an instance
    name of 'title' to. Which was a png that had about 20px of artboard
    that cause that initial gap. Thanks guys!

  • In Muse is there a way to make a state button open an accordian menu?

    I am building a phone version and i want a button to open the accordion menu I put in the header.

    Please check this out :
    https://www.youtube.com/watch?v=Thm8bsNccvI
    https://www.youtube.com/watch?v=dQy_lj0ZXss
    Thanks,
    Sanjit

  • Mobile site using an accordian panel with menu selections

    I watched the adobe muse video here is the link  http://tv.adobe.com/watch/creative-suite-podcast-designers/how-to-create-a-dynamic-sliding -menu-for-your-mobile-website-in-adobe-muse/
    In the demo, when you preview it mobile site, the menu is not displayed and when you tap th emenu, the accordian menu displays and pushes all the content down and then when you close it, pushes it back up.
    I created a similar test mobile site. But, when I preview it the menu always appear on start up and the content is not pushed down or up when the menu is activated or closed.  I noticed that the options on the accordian widget in the video are different than in my MUSE which is V7.1 build 329.  There is no close all initially check box. Instead I have an overlap item below check box.
    So my question is what do I need to do to get this to work as per the video.
    Thanks-Bryan

    Hello,
    I think there may be an issue in how your model/Accordion Menu was configured.  What insert option are you using?  Your destination should only be 'one' row OR 'one' column at the most.
    Thanks,
    AJ

  • Spry Accordian Tabs Question

    Hi
    I'm trying to create a spry accordian menu for a navbar and am having some trouble.
    This is the first time I've tried it so I would appreciate any help.
    The Client would like the tabs to be:
    Home
    Students
       High School Students
       College Students
    Professionals
    Parents/Educators
    Seminars
    Bio
    Q  & A Blog
    Testimonials
    So all they would like High School Students and College Students to be child tabs underneath the parent tabs and all other tabs to be parent tabs.
    They asked for a spry accordian.
    They want the nav bar to be on the left.
    Here is the link to the website online:
    http://www.elynncohen.com/index2spry2.html#
    and here are my questions:
    1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
    2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
    3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
    4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
    Any help would be much appreciated!
    Thanks!!!
    Here is my code:
    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="UTF-8">
    <title>Your Career Direction Career and College Counseling</title>
    <meta name="Keywords" content="career counseling, college counseling, job search, career choice, college options, career options, work, jobs, new opportunities, career change, new career, new job" />
    <meta name="Description" content="Your Career Direction :: Career and College Counseling" "Considering your college choices & career options" "Preparing for the world of work after college" "Seeking a new position to further your career"
    "In-transition and considering new opportunities"
    "Seeking to make a significant and meaningful career change"  />
    <meta name="Publisher" content="Your Career Direction, LLC" />
    <meta name="Copyright" content="Copyright 2012, Your Career Direction, LLC. All rights reserved." />
    <meta name="Author" content="Lisa Mark" />
    <meta name="Language" content="en-US" />
    <meta name="distribution" content="global" />
    <meta name="revisit-after" content="10 days" />
    <meta name="Robots" content="All" />
    <link rel="Index" href="index.html" />
    <link rel="Site Map" href="sitemap.html" />
    <script type="text/javascript" src="//use.typekit.net/ifb2bte.js"></script>
    <script src="SpryAssets/SpryAccordion.js" type="text/javascript"></script>
    <script type="text/javascript">try{Typekit.load();}catch(e){}</script>
    <style type="text/css">
    <!--
    body {
        margin: 0;
        padding: 0;
        color: #000;
        font-size: 100%;
        line-height: 1.4;
        background-image: url(images/background.gif);
        background-repeat: repeat;
    /* ~~ Element/tag selectors ~~ */
    ul, ol, dl { /* Due to variations between browsers, it's best practices to zero padding and margin on lists. For consistency, you can either specify the amounts you want here, or on the list items (LI, DT, DD) they contain. Remember that what you do here will cascade to the .nav list unless you write a more specific selector. */
        padding: 0;
        margin: 0;
    h1, h2, h3, h4, h5, h6, p {
        margin-top: 0;     /* removing the top margin gets around an issue where margins can escape from their containing div. The remaining bottom margin will hold it away from any elements that follow. */
        padding-right: 15px;
        padding-left: 15px;
    .container .sidebar1 h3 {
        padding-left: 0px;
        color: #C60651;
        font-size: x-large;
    h1 strong {
        color: #C60651;
        font-size: 90%;
        font-family: "Binary ITC Bold";
    h1 strong em {
    a img { /* this selector removes the default blue border displayed in some browsers around an image when it is surrounded by a link */
        border: none;
    /* ~~ Styling for your site's links must remain in this order - including the group of selectors that create the hover effect. ~~ */
    a:link {
        color:#414958;
        text-decoration: underline; /* unless you style your links to look extremely unique, it's best to provide underlines for quick visual identification */
    a:visited {
        color: #4E5869;
        text-decoration: underline;
    a:hover, a:active, a:focus { /* this group of selectors will give a keyboard navigator the same hover experience as the person using a mouse. */
        text-decoration: none;
    /* ~~ this container surrounds all other divs giving them their percentage-based width ~~ */
    .container {
        width: 80%;
        max-width: 1260px;/* a max-width may be desirable to keep this layout from getting too wide on a large monitor. This keeps line length more readable. IE6 does not respect this declaration. */
        min-width: 780px;/* a min-width may be desirable to keep this layout from getting too narrow. This keeps line length more readable in the side columns. IE6 does not respect this declaration. */
        background: #FFF; /* the auto value on the sides, coupled with the width, centers the layout. It is not needed if you set the .container's width to 100%. */
        margin-top: 0;
        margin-bottom: 0;
        margin-right: auto;
        margin-left: auto;
        border-right-width: thick;
        border-left-width: thick;
        border-right-style: solid;
        border-left-style: solid;
        border-right-color: #C60651;
        border-left-color: #C60651;
    /* ~~ the header is not given a width. It will extend the full width of your layout. It contains an image placeholder that should be replaced with your own linked logo ~~ */
    .header {
        padding-top: 40px;
    #Quote {
        float: right;
        clear: left;
        margin-right: 1%;
    /* ~~ These are the columns for the layout. ~~
    1) Padding is only placed on the top and/or bottom of the divs. The elements within these divs have padding on their sides. This saves you from any "box model math". Keep in mind, if you add any side padding or border to the div itself, it will be added to the width you define to create the *total* width. You may also choose to remove the padding on the element in the div and place a second div within it with no width and the padding necessary for your design.
    2) No margin has been given to the columns since they are all floated. If you must add margin, avoid placing it on the side you're floating toward (for example: a right margin on a div set to float right). Many times, padding can be used instead. For divs where this rule must be broken, you should add a "display:inline" declaration to the div's rule to tame a bug where some versions of Internet Explorer double the margin.
    3) Since classes can be used multiple times in a document (and an element can also have multiple classes applied), the columns have been assigned class names instead of IDs. For example, two sidebar divs could be stacked if necessary. These can very easily be changed to IDs if that's your preference, as long as you'll only be using them once per document.
    4) If you prefer your nav on the right instead of the left, simply float these columns the opposite direction (all right instead of all left) and they'll render in reverse order. There's no need to move the divs around in the HTML source.
    .sidebar1 {
        float: left;
        width: 15%;
        padding-bottom: 10px;
        margin-top: 40px;
        margin-left: 25px;
        background-color: #FFF;
        font-family: museo-sans;
    arial;
        max-width: 200px;
        min-width: 180px;
    .content {
        float: left;
        padding-top: 10px;
        padding-bottom: 10px;
        padding-left: 10;
        font-family: museo-sans;
    arial;
        margin-top: 40px;
        padding-right: 10px;
        width: 50px;
        font-size: large;
    .container .content p {
        padding-top: 0px;
    .sidebar2 {
        float: left;
        width: 20%;
        background-color: #D3CCB2;
        margin-top: 40px;
        padding-top: 10px;
        border-top-color: #FFF;
        border-right-color: #FFF;
        border-bottom-color: #FFF;
        border-left-color: #FFF;
        border-right-width: 5px;
        font-family: museo-sans;
    arial;
        font-size: 90%;
        right: 12%;
    /* ~~ This grouped selector gives the lists in the .content area space ~~ */
    .content ul, .content ol {
        padding-top: 0px;
        padding-right: 25px;
        padding-bottom: 15px;
        padding-left: 40px;
        font-family: museo-sans; arial;
        font-size: 100%;
        color: #666;
    .container .content p {
        font-family: museo-sans;
    arial;
        padding-top: 0px;
        padding-left: 17px;
        padding-bottom: 0px;
    #Quote {
        float: right;
        clear: both;
    /* ~~ The navigation list styles (can be removed if you choose to use a premade flyout menu like Spry) ~~ */
    ul.nav {
        list-style: none; /* this creates the space between the navigation on the content below */
        font-family:museo-sans; arial;
        line-height: 250%;
    .nav {
        font-family: museo-sans;
    arial;
        padding-left: 0px;
    ul.nav li {
        font-family: museo-sans; arial;
        padding-bottom: 10px;
    ul.nav a, ul.nav a:visited { /* grouping these selectors makes sure that your links retain their button look even after being visited */
        display: block; /* this gives the link block properties causing it to fill the whole LI containing it. This causes the entire area to react to a mouse click. */
        text-decoration: none;
        color: #333333;
        background-color: #FFF;
        font-family: museo-sans; arial;
        padding-top: 5px;
        padding-right: 5px;
        padding-bottom: 10px;
        padding-left: 15px;
    ul.nav a:hover, ul.nav a:active, ul.nav a:focus { /* this changes the background and text color for both mouse and keyboard navigators */
        color: #C60651;
        font-family:museo-sans; arial;
        background-color: #FFF;
        background-image: url(images/navbar2.gif);
        padding-bottom: 10px;
    .content img {
    /* ~~The footer ~~ */
    .footer {
        position: relative;/* this gives IE6 hasLayout to properly clear */
        clear: both; /* this clear property forces the .container to understand where the columns end and contain them */
        padding-top: 0px;
        padding-right: 0;
        padding-bottom: 10px;
    /* ~~miscellaneous float/clear classes~~ */
    .fltrt {  /* this class can be used to float an element right in your page. The floated element must precede the element it should be next to on the page. */
        float: right;
        margin-left: 8px;
    .fltlft { /* this class can be used to float an element left in your page. The floated element must precede the element it should be next to on the page. */
        float: left;
        margin-right: 8px;
    .clearfloat { /* this class can be placed on a <br /> or empty div as the final element following the last floated div (within the #container) if the #footer is removed or taken out of the #container */
        clear:both;
        height:0;
        font-size: 1px;
        line-height: 0px;
    .container .content {
        width: 50%;
        font-size: large;
        font-family: museo-sans; arial;
    #footer {    width: 100%;
        background-color: #FFF;
    .container .sidebar2 h4 img {
        padding-left: 20px;
        padding-top: 0px;
    .sidebar2 p img {
        border: medium solid #C60651;
    #Insert_logo2 {
        border-top-width: 4px;
        border-right-width: 4px;
        border-bottom-width: 4px;
        border-left-width: 4px;
        border-top-color: #fff;
        border-right-color: #fff;
        border-bottom-color: #fff;
        border-left-color: #fff;
    .container .content p .content strong {
        font-family: museo-sans; arial;
    .container .content .content {
        font-family: museo-sans; arial;
    .container .content ul li strong {
        font-family: museo-sans;
    arial;
        font-size: 95%;
        line-height: 150%;
        list-style-type: disc;
    .container .content ul {
    test {
        font-family: "Binary ITC Bold";
    .container .sidebar2 p img {
        margin-right: auto;
        margin-left: auto;
        border-top-width: medium;
        border-right-width: medium;
        border-bottom-width: medium;
        border-left-width: medium;
        border-top-color: #C60651;
        border-right-color: #C60651;
        border-bottom-color: #C60651;
        border-left-color: #C60651;
    li strong {
        line-height: 130%;
        list-style-type: circle;
        color: #978980;
    .container .content ul {
    .container .sidebar1 .nav {
        margin-top: 10px;
        margin-bottom: 10px;
    .sidebar1 .nav li {
        padding-bottom: 10%;
    .nav li a {
        background-image: url(images/navbar2.gif);
        background-repeat: no-repeat;
        background-position: right center;
        left: auto;
        right: auto;
        clip: rect(auto,auto,auto,auto);
    .container .sidebar1 .nav li a {
    .container .sidebar1 h6 {
        padding: 0px;
        color: #000000;
    #footer h3 strong {
        font-size: 60%;
        color: #978980;
    .container .content p {
        padding-right: 0%;
        padding-left: 0%;
        font-size: 85%;
    .container .sidebar2 p {
        padding-right: 8%;
        padding-left: 8%;
        padding-top: 5px;
    #Insert_logo2 #Insert_logo2 {
        padding-left: 15px;
    .container .content ul {
        color: #C60651;
    h6 {
        color: #978980;
        font-family: museo-sans;
    arial;
        font-size: 82%;
        padding-left: 20%;
        text-align: left;
        text-indent: 8px;
    .nav li a {
        padding-bottom: 10px;
    h8 {
        font-family: museo-sans; arial;
        font-size: 100%;
    h4 {
        font-family: museo-sans;
    arial;
        font-size: 100%;
        color: #C60651;
        padding-left: 17px;
        padding-top: 5px;
        padding-bottom: 0px;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
    .sidebar1 h8 strong {
        font-size: 80%;
        font-family:museo-sans; arial;
    .container .sidebar1 h7 {
        font-size: 40%;
        color: #978980;
    h7 {
        font-family: museo-sans; arial;
        font-size: 15%;
    .container .sidebar1 h8 {
        font-family: museo-sans; arial;
    .sidebar2 p img {
            max-width: 100%;
    .container .content img {
        padding-left: 3%;
    img {
        position: static;
        text-align: left;
    body,td,th {
        font-family: museo-sans; arial;
    h5 {
        font-size: 150%;
        color: #C60651;
        padding-left: 0px;
        font-family:museo-sans; arial;
    .container .content p {
        padding-left: 17px;
        padding-right: 30px;
        font-size: 87%;
    .container .sidebar2 p {
        font-size: 90%;
    .container .sidebar1 .nav li {
        font-family: museo-sans;
    arial;
    .container .sidebar1 .nav li a {
        padding-left: 0px;
        margin-bottom: 0px;
        height: 30px;
    li a {
        padding-left: 2px;
    -->
    </style><!--[if lte IE 7]>
    <style>
    .content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
    ul.nav a { zoom: 1; }  /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
    </style>
    <![endif]-->
    <link href="SpryAssets/SpryAccordion.css" rel="stylesheet" type="text/css">
    </head>
    <body><script type="text/javascript">
    function pageWidth() {
    return window.innerWidth != null? window.innerWidth : document.documentElement && document.documentElement.clientWidth ? document.documentElement.clientWidth : document.body != null ? document.body.clientWidth : null;
    function pageHeight() {
    return window.innerHeight != null? window.innerHeight : document.documentElement && document.documentElement.clientHeight ? document.documentElement.clientHeight : document.body != null? document.body.clientHeight : null;
    </script>
    <div class="container">
      <div class="header"><!-- end .header -->
        <p class="clearfloat"><a href="#index.html" id="Insert_logo2"><img src="images/YCD-logo-tag-RGB-web-SM.gif" alt="Your Career Direction Logo" name="Insert_logo" width="50%" id="Insert_logo2" style="background: #FFF
        ; display:block;" /></a></p>
        <div id="Quote"><img src="images/quote.gif" alt="Choose a job you love" width="355" height="81"></div>
        <p class="clearfloat"> </p>
    </div>
      <div class="sidebar1">
        <ul class="nav">
          <li>
            <div id="Accordion1" class="Accordion" tabindex="0">
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Home</a></div>
                <div class="AccordionPanelContent">Content 1</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Students</a></div>
                <div class="AccordionPanelContent"><a href="#">High School</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Professional</a></div>
                <div class="AccordionPanelContent">Content 3</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
                <div class="AccordionPanelContent">Content 4</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
                <div class="AccordionPanelContent">Content 5</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Bio</a></div>
                <div class="AccordionPanelContent">Content 6</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Q &amp; A Blog</a></div>
                <div class="AccordionPanelContent">Content 7</div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
                <div class="AccordionPanelContent">Content 8</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <div class="content">
    <p>Given today's competitive job market, global economy, and changed corporate culture,
    we can no longer depend upon others to ensure our professional futures. Choosing or
    changing your career direction requires self-reflection, career education and an action plan.</p>
    <img src="images/Whether-you-are-.gif" alt="Whether you are considering your college choices and career options" width="197" height="31" align="left">
    <ul>
          <br><br><li><strong>Considering your college choices &amp; career options</strong></li>
          <li><strong>Preparing for the world of work after college</strong></li>
          <li><strong>Seeking a new position to further your career</strong></li>
          <li><strong>In-transition and considering new opportunities</strong></li>
          <li><strong>Seeking to make a significant and meaningful career</strong> <strong>change</strong></li>
        </ul>
    <img src="images/Onethingisforsureraster.gif" width="352" height="49" alt="One thing is for sure, we all want to direct our own careers, our own lives!">
    <br><p> Building a successful and rewarding career requires linking your interests, education and experience with employment trends, growth industries, and career choices. It takes making smart decisions about your college major, vocational training and continuing education options. With enthusiasm, persistence and top notch job search skills, you can succeed in finding a path to career that is right for you.</p>
    <p> We are your advocate. We listen, assess, strategize, inspire, counsel, and network on your behalf. With a personalized, holistic approach, we'll work with you to help you create an action plan; a path designed to get you to where you want to go and become what you want to be.</p>
    <img src="images/yourcareerourpassionraster.gif" width="441" height="20" alt="At Your Career Direction, YOUR career is our passion!"> </div>
      <div class="sidebar2">
        <p><img src="images/Counselingastudent.gif" width="100%" alt="Lisa Mark counseling a student"></p>
        <p>Our mission is to help you explore, choose and create your direction for an exciting and rewarding career path.</p>
         <p>We incorporate our experience with today's job market and career counseling expertise with your passions and interests. We'll introduce you to new career ideas, target companies and generate job and internship opportunities for you.</p>
         <p>We provide step by step guidance to ensure your success during the college application, job interview
    and decision making process.
    </p>
    </div>
      <div class="footer">
        <div id="footer">
          <h6 align="left"> Your Career Direction, LLC •  96 Harvard Avenue, Maplewood, N.J. 07040 • (973) 996-0207 • [email protected]</h6>
        </div>
        <p> </p>
      <!-- end .footer --></div>
    <!-- end .container --></div>
    <script type="text/javascript">
    var Accordion1 = new Spry.Widget.Accordion("Accordion1");
    </script>
    </body>
    </html>

    1. The spry accordian has a box around it on mouse down but I can't figure out how to get rid of it. I've checked all the CSS rules for the spry accordian and none of them seem to have rules around them.
    2. All the tabs have a content area underneath them and we only want content areas underneath the student tab. You see how it goes when you click on any of the tabs, you get a little thing that says content 1, 2 etc. I tried deleting them in the code and the page goes completely crazy when I do and the nav bar areas stretch all the way across the page.
    3. I can't figure out how to get the child tabs (which would be the tabs under students which say high school and college) to have two tabs. You will see that it does have the high school tab there now. When I try cutting and pasting the code to try to get two tabs, it does not work. The spry accordian framework only creates one content area under each tab.
    4. I'd like the child tabs to have a narrower height than the parent tabs, and be indented so that they will clearly be set off and different than the parent tabs.
    1. Line 454
    <div id="Accordion1" class="Accordion" tabindex="0" style="outline: none;">
    2 & 3. Change your code from Line 455 - 491:
    <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Home</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Students</a></div>
                <div class="AccordionPanelContent"><a href="#">High School</a><br/><a href="#" style="margin-top: -30px;">College</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Professional</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Parent/Educator</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Seminars</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Bio</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Q &amp; A Blog</a></div>
              </div>
              <div class="AccordionPanel">
                <div class="AccordionPanelTab"><a href="#">Testimonials</a></div>
              </div>
            </div>
          </li>
        </ul>
      </div>
    4. Append your HTML for child tabs like this:
    <div class="AccordionPanelContent" id="submenu"><a href="#">High School</a></div>
    Create a new #submenu css rule in your CSS document and set styling the way you want it.

Maybe you are looking for