We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 35103
    • 54 Posts
    Hi All,

    My jQuery Wayfinder accordion menu isn't working. It displays level one items but when you click on one of those to reveal a subitem it doesn't display them and goes to that item's page. I have checked the generated html and it is not putting the sub items in as <li> in a new <ul> as it should.

    I followed the tutorial on: http://wiki.modxcms.com/index.php/Accordion_menu_with_Wayfinder_using_JQuery exactly, the only thing I changed was the syntax from [+"something"+] to [[+"something"]] or [!"something"!] to [[!"something"]] so it was updated for Revolution.

    If I make a normal Wayfinder without any jQuery or styling it works fine and generates the subitems. I have double checked my syntax changes and all looks fine to me.

    I downloaded the ddaccordion.js file from dynamic drive as well. And my site is already using jQuery successfully.

    So I am stumped as to why it isn't working...!

    Has anyone got the Wayfinder jQuery Accordion menu to work with Revolution? Or anyone run into the same problem?

    I am on Revo 2.2.4-pl

    Any help greatly appreciated,

    David
      • 19369
      • 1,098 Posts
      Please wrap your code with the code tag that you find here in the forum.
        • 9995
        • 1,613 Posts
        Did u check the source? Might be a js or css problem.
        What is ur Wayfinder call?


          Evolution user, I like the back-end speed and simplicity smiley
          • 35103
          • 54 Posts
          Sorry microcipcip, I only thought that was necessary for blocks or lines of code rather than citing some in a sentence. And thank you for responding fourroses666.

          ...Speaking of code here is what I have:

          Simple wayfinder call that works:
          [[!Wayfinder? &startId=`4` &level=`2` ]]


          Wayfinder call that doesn't work / doesn't seem to generate the sub menu unordered list:
          [[!Wayfinder? &startId=`4` &level=`2` &outerTpl=`wfOuter` &parentRowTpl=`wfParentRow` &activeParentRowTpl=`wfActiveParentRow` &innerTpl=`wfInner` &rowTpl=`wfRow` &innerRowTpl=`wfInnerRow` &cssTpl=`wfStyle` &jsTpl=`wfJs` &hereTpl=`wfHere` ]]


          Here are my chunks copied straight from the example and then adjusted for Revolution:

          wfJs:
          <script type="text/javascript">
          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" or "mouseover
          	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: true, //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", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
          	animatespeed: "fast", //speed of animation: "fast", "normal", or "slow"
          	oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
          		//do nothing
          	},
          	onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
          		//do nothing
          	}
          })
          </script>


          wfStyle:
          <style type="text/css">
          .accordion-menu {
          	width:160px;
          	font:11px "Verdana";
          }
          .accordion-menu a.menuitem{
          	background:#e5e5e5;
          	font:bold 11px "Verdana";
          	display:block;
          	width:auto;
          	padding:3px 0 3px 5px;
          	border-top:2px solid #FFFFFF;
          }
          .accordion-menu li{
          	list-style-type:none;
          }	
          .accordion-menu a.menuitem:visited, .accordion-menu .menuitem:active{
          	color:#cc3300;
          }
          .accordion-menu a.menuitem:hover{
          	background:#d8d8d8;
          }
          .accordion-menu ul.submenu{
          	width:auto;
          	list-style-type:none;
          }
          .accordion-menu ul.submenu li{
          	text-indent:5px;
          	background:#d3d3d3;
          	display:block;
          	width:auto;
          }
          .accordion-menu ul.submenu li a{
          	text-indent:5px;
          	background:#d3d3d3;
          	display:block;
          	width:auto;
          	padding:3px 0 3px 5px;
           	border-top:2px solid #FFFFFF;
          }
          .accordion-menu ul.submenu li a:hover{
          	background-color:#c0bfbf;
          }
          .activemenu{
          	background:#665f6e;
          	color:#FFFFFF;
          	font:bold 11px "Verdana";
          	display:block;
          	width:auto;
          	padding:3px 0 3px 5px;
          	border-top:2px solid #FFFFFF;
          }
          .accordion-menu ul.submenu li a.activemenu{
          	background:#8d8793;
          	color:#FFFFFF;
          	font:11px  "Verdana";
          	display:block;
          	width:auto;
          	padding:3px 0 3px 5px;
          	border-top:2px solid #FFFFFF;
          	text-indent:5px;
          }
          #active-submenuheader{
          	background:#665f6e;
          	color:#FFFFFF;
          	font:bold 11px  "Verdana";
          	display:block;
          	width:auto;
          	padding:3px 0 3px 5px;
          	border-top:2px solid #FFFFFF;
          }	
          </style>


          wfOuter:
          <div class="accordion-menu">
            <ul>
              [[+wf.wrapper]]
            </ul>
          </div>


          wfRow:
          <li><a class="menuitem" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.title]]</a></li>


          wfParentRow:
          <li><a class="menuitem submenuheader" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
          [[+wf.wrapper]]</li>


          wfInner:
          <ul class="submenu">
            [[+wf.wrapper]]
          </ul>


          wfInnerRow:
          <li><a href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>


          wfActiveParentRow:
          <li><a class="menuitem submenuheader" id="active-submenuheader" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a>
          [[+wf.wrapper]]</li>


          wfHere:
          <li><a class="activemenu" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.linktext]]</a></li>
          [[+wf.wrapper]]


          - - -

          It seems to me the issue is when I use the wfRow chunk, that is when the submenu isn't generated. But I don't know if that is a problem with the chunk or the JavaScript or the css.

          Attached is a screen grab of my document tree, I'm only generating a menu from what is in the Work resource.

          Help greatly appreciated!!!

          Thanks,

          David
            • 19369
            • 1,098 Posts
            I can't spot any error in your code. At first I thought it was "wfRow" chunk without the wf.wrapper, but reading the tutorial it seems that it has been left out intentionally.

            Do you know if it is Wayfinder or jQuery that is not working? Look the source code, if you see the nested ul there, it means that the problem is jQuery. For example you may be using a much newer version of jQuery, the current one is 1.7.2 IIRC and may be incompatible with the accordion script.
              • 35103
              • 54 Posts
              Thanks for the reply microcipcip, I think it is not a problem with jQuery as the submenu unordered list is not generated and if I remove the wfRow Tpl or just make a basic wayfinder call then it generates fine.

              I tried rolling my jQuery version back to 1.4.2 (as in the demo) and it still didn't fix it. So I think it is definitely something wrong with the chunks. Could you post the code that you thought the wfRow should contain?

              I'm currently trying to adapt another version I have seen separate to MODX and getting some success... fingers crossed!
                • 19369
                • 1,098 Posts
                Quote from: jaeger83 at Jul 03, 2012, 06:22 AM
                Could you post the code that you thought the wfRow should contain?
                Sure:
                <li><a class="menuitem" href="[[+wf.link]]" title="[[+wf.title]]">[[+wf.title]]</a>[[+wf.wrapper]]</li>

                  • 10208 ☆ A M B ☆
                  • 1,780 Posts
                  This may or may not work, but you can try adding &hideSubMenu=`0` to the Wayfinder call.
                    Frogabog- MODX Websites in Portland Oregon
                    "Do yourself a favor and get a copy of "MODX - The Official Guide" by Bob Ray. Read it.
                    Having server issues? These guys have MODX Hosting perfected - SkyToaster