-
- 7 Posts
Hi,
I’m trying to figure out how to go about adding javascript to top level links with children in wayfinder. In other words, some of the top level links with no children will just be regular links, but the ones with children will toggle the children below when clicked. In addition, I need to add a div surrounding the second level links. (This will be a two-level menu). This is what I’d like the end output code to be:
<li><a href="javascript:toggleDisplayById(’expand’)">Top Level Link</a>
<div id="expand">
<ul>
<li><a href="tobeinserted">Second Level Link</a></li>
<li><a href="tobeinserted">Second Level Link</a></li>
</ul>
</div>
</li>
Can anyone point me in the right direction? I’m thinking I need to use the [+wf.link+] chunk? Any help is very much appreciated.
Thanks in advance!
-
- 4,213 Posts
Could this work...
Have the default innerTpl and for parentRowTpl use:
<li[+wf.classes+]>
<a href="javascript:toggleDisplayById('expand[+wf.docid+]')" title="[+wf.title+]">[+wf.linktext+]»</a>
<div id="expand[+wf.docid+]">[+wf.wrapper+]</div>
</li>
"He can have a lollipop any time he wants to. That's what it means to be a programmer."
-
- 786 Posts
doze, I think you nailed it. Looks like that should work great.
-
- 7 Posts
Thank you kylej and doze! I think I am very close, the menu shows only the top level, but the toggle doesn’t function:
I tried moving the <div id="expand"> outside of the <div id="expand15"> but it didn’t like that either. Any ideas? Thanks so much for your help!
<ul><li class="21">
<a href="javascript:toggleDisplayById(’expand15’)" title="Search Test">Search Test»</a>
<div id="expand15">
<div id="expand"><ul>
<li class="22"><a href="/site/mainlevel/2ndinner.html" title="Test -- 2nd inner level page" >Test -- 2nd inner level page</a></li>
</ul>
</div>
-
- 786 Posts
don’t use the innerTpl anymore, that is no longer needed with the way doze has you templating it. try removing that and see if it works