Children Not Visible

If you click on Media, there's a head called Videos, that's the child, iy onku appears when you click on the parent that's when you can see the ul

Try putting an id of accordion to your wayfinder ul I think it's your JS what's causing the issue because it keeps looking for the accordion ID but doesn't find it.

In the Wayfinder call on the home page, you have &level=`1`

This will cause Wayfinder to generate a menu with only one level. You need to have &level-`2` and let your Javascript handle the showing/hiding of the second level items.

Keep in mind that your MODx snippet will do all of its work on the server, before the page is sent to the browser. The Javascript works in the browser, on the page that was sent from the server.

Use the "view source" of your browser to see what MODx has generated. That is what your Javascript will work with.

I changed the Wayfinder of the homepage and it is still generating the same code.Where do I insert the ul id, in the template?

Is it possible that the ddaccordion.js could be the one with the problem?

Lookingn at your source code I noticed the submenu ul is not inside the li, it's inserting it after the li so I think your outerTpl is wrong.

Can you post what wfOuter has as its content?

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

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

Make your outer wrapper:



then wrap your wayfinder call with:



I think it would be best if you post all your tpls because I think you might have some things setup incorrectly.

parentrowtpl:


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

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

rowTpl:


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

jsTpl:
<script type="text/JavaScript">
function accordion(el) {
if ($('visible') == el) {
new Effect.Parallel(
[
new Effect.SlideUp(el.parentNode.id+'-body')
], {
duration: 0.2
});
el.id='';
return;
}
if ($('visible')) {
var eldown = el.parentNode.id+'-body';
var elup = $('visible').parentNode.id+'-body';
new Effect.Parallel(
[
new Effect.SlideUp(elup),
new Effect.SlideDown(eldown)
], {
duration: 0.2
});
$('visible').id = '';
}
else{
new Effect.Parallel(
[
new Effect.SlideDown(el.parentNode.id+'-body')
], {
duration: 0.2
});
}
el.id = 'visible';
}

function init() {
// hide all elements apart from the one with id visible
var acc = document.getElementById('accordion');
var apanels = acc.getElementsByTagName('div');
for (i = 0; i < apanels.length; i++) {
if (apanels[i].className == 'panel_body') {
apanels[i].style.display = 'none';
}
}
var tmpx = document.getElementById('visible');
if (tmpx){
var avis = tmpx.parentNode.id+'-body';
document.getElementById(avis).style.display = 'block';
}
}

function addEvent(elm, evType, fn, useCapture) {
elm["on"+evType]=fn;return;
}

addEvent(window, "load", init);
</script>

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