Right, I’ve finally got a decent working version of accordion using jQuery, and without a whole host of code listed in the versions given on here. No doubt they are probably more featured than mine, but I’ve got mine working!
Firstly, go to the jquery website and download the latest version (1.2.6) of the packed library and copy it into the directory: /manager/media/script.
In the template of where you want the accordion menu to appear, or you can use the wfJS chunk, enter the code:
<script type="text/javascript" src="/manager/media/script/jquery-1.2.6.pack.js"></script>
<script type="text/javascript">
// The line below makes sure that jQuery does not conflict with any other plugins.
jQuery.noConflict();
// This function is called when the document is loaded and displayed in the browser.
jQuery(document).ready(function(){
// Add a value to each menu:
jQuery("#Menu > li > a + ul").attr("slide", "down");
// Collapse everything but the first menu:
jQuery("#Menu > li > a").not(":first").find("+ ul").slideUp(1).attr("slide", "up");
// Expand or collapse:
jQuery("#Menu > li > a").click(function() {
jQuery(this).next('ul').slideDown('fast');
jQuery(this).parent().siblings('li').find('ul:visible').slideUp('fast');
});
});
</script>
The code is quite neat and does not require any more individual javascript function calls in the TPL files (such as onClick events).
You need a minimum of three TPL chunks for the desired effect, innerTPL, outerTPL and parentTPL. The outerTPL defines the menu for having the accordion effect, the innerTPL stops wayfinder assigning the same template of outerTPL, and the parentTPL prevents the page reloading when a menu item is clicked.
Create a chunk called innerTPL and copy the code below into it.
Create a chunk called outerTPL and copy the code below into it.
<ul id="Menu"[+wf.classes+]>
[+wf.wrapper+]
</ul>
You’ll notice that the ID of the outer most UL is called "Menu", if this is changed, then in the javascript lines you’ll need to change the Menu as well.
Create a chunck called outerTPL and copy the code below into it.
<li[+wf.classes+]>
<a href="javascript:;" title="[+wf.title+]">[+wf.linktext+]»</a>
[+wf.wrapper+]
</li>
The blank javascript in the href is simply to prevent the page from reloading.
The call to wayfinder is:
[!Wayfinder? &startId=`0` &level=`2` &outerTpl=`wfOuter` &innerTpl=`wfInner` &parentRowTpl=`wfParentRow` !]
Hopes this helps anyone trying to get a simple accordion menu on their site.
If you want to view an example of this accordion menu, go to the site
http://www.dgpanthers.net
