OK - I didnt get this to work using ddaccordion, but there is a better JQuery accordion script which seems to do exactly what I need.
1)
I left the code outlined above almost exactly as it is, however I changed wfOuter to the following - basically putting an id of accordion on the <ul> element:
<div class="accordion-menu">
<ul id="accordion">
[[+wf.wrapper]]
</ul>
</div>
I downloaded the following from Jquery:
http://jqueryui.com/download
Jquery core, the Jquery UI pack (with the accordion script, and widgets). You will find the jquery core and jquery ui scripts in a gfolder marked ’js’. The widget and accordian scripts are in a folder marked ’development bundle’
I then added the following lines into my templates, but these will need to point to wherever you store your javascript: (note I have edited the filanames of script files to shorten them down. These arent the original filenames, but should give you an idea of the scripts you need.)
<script type="text/javascript" src="assets/template/js/jquery.js"></script>
<script type="text/javascript" src="assets/template/js/jquery-ui.js"></script>
<script type="text/javascript" src="assets/template/js/jquery.ui.widget.js"></script>
<script type="text/javascript" src="assets/template/js/jquery.ui.accordion.js"></script>
I then have a jquery function call in my <head> section that looks like this. Its important to make the header ’submenuheader’ (assuming you using the chunks from the wayfinder accordian code as outlined in my post above) as this ensures the widget knows what are sections with submenus and those that are standard links - :
<script>
$(function() {
$( "#accordion" ).accordion({ header: '.submenuheader' });
});
</script>
I then adjusted jquery.ui.accordion.js settings to the following - the settings below tell the widget you are using a navigation accordion (as opposed to expanding / collapsing content areas, for example). You might like to check these settings and make sure they are suitable for what you need:
$.widget( "ui.accordion", {
options: {
active: 0,
animated: "slide",
autoHeight: false,
clearStyle: false,
collapsible: true,
event: "click",
fillSpace: false,
header: "> li > :first-child,> :not(li):even",
icons: {
header: "ui-icon-triangle-1-e",
headerSelected: "ui-icon-triangle-1-s"
},
navigation: true,
navigationFilter: function() {
return this.href.toLowerCase() === location.href.toLowerCase();
}
},
Finally, I adjuested my snippet call to the following, removing the call to wfJs:
[[!Wayfinder? &startId=`0` &outerTpl=`wfOuter` &parentRowTpl=`wfParentRow` &activeParentRowTpl=`wfActiveParentRow` &innerTpl=`wfInner` &rowTpl=`wfRow` &innerRowTpl=`wfInnerRow` &cssTpl=`wfStyle` &hereTpl=`wfHere`]]
Thats it! Obviously some of the chunks could be edited down as this jquery script seems a little leaner than ddaccordion, but because I wanted to keep my styles intact from using the previous script I kept it as it is. You should find yourself with a much more flexible accordion menu using the latest jquery.
If you find this useful, but are stuck, post a note and I will try to expand on how I got it to work.
Good luck!
Dan.
