next »

[jam]

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!

[kylej]

ok, for adding the div around the second level you will need to create a chunk for the template innerTpl like the following:

Code:

<div id="expand">
<ul[+wf.classes+]>
[+wf.wrapper+]
</ul>
</div>

for the javascript links you need to create a chunk for the template parentRowTpl like the following:

Code:

<li[+wf.classes+]>
<a href="javascript:toggleDisplayById('expand')" title="[+wf.title+]">[+wf.linktext+]»</a>
[+wf.wrapper+]
</li>

That should do it.  Now the only problem you will have with this is if there is more than one submenu, it will have the same id as the first and cause problems.  Also if a user has js disabled, the links will not function at all. 

[jam]

Thanks so much! I've got it working, but you were right, I do have more than one submenu and when you click any of the folders, they are all toggling the top submenu because they have the same id as the first.    Any way to solve this? Should I use &rowIdPrefix? Instead of 'expand' below, what code would I place to pull in the right unique id?

javascript:toggleDisplayById('expand')

[doze]

Could this work...

Have the default innerTpl and for parentRowTpl use:

Code:

<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>

[kylej]

doze, I think you nailed it.  Looks like that should work great.

[jam]

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>

[kylej]

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