2 accordion menus on one page

[chmchm]

Hello!
I am trying to accomplish getting two menus, one in each of two columns, on one page. I am using the StrayGoat model to create my accordions, specifically, "foundation-menu-off-canvas.js" (Although, I am not using the cloning for the side menu.)
The process works great for single menu pages. But when I use two menu proxies to add the menus to one page...

I get a console warning:

foundation.js:5477 Tried to initialize accordion-menu on an element that already has a Foundation plugin.

AND randomly, about one time in ten, the accordion loads open on the page.
Sometimes it's the left column, sometimes it's the right.
It's as if the accordion didn't get the javascript/css message that it's an accordion. If I reload the page, the accordion menu loads as expected.

I have tried all kinds of things to either recreate with reason or fix like:
Adding id's to the accordion ul,
reInitializing Foundation on the id, or the menu plugin
Nothing seems to work. If you have any suggestions, I would welcome them!
Thanks in advance,
Christina Morris

[NorthEast]

I produced the project used by Straygoat, and I guess the issue will be with the initialisation script (foundation-menu-off-canvas-initialisation.js).

At the start of the script, the line below says wait until the menu is loaded (i.e. MadCap scripts have populated the menus with items), then run the function.
But as you have two menus with the same classes (.menu.mc-component), the function is run twice.

Code: Select all

$(".menu.mc-component").on("loaded", function () { 

At the end of the function, Foundation is initialised - which means it's initialised twice, hence the error.

Code: Select all

$(document).foundation();

So you need to edit the script to run the function after both menus have loaded.

[chmchm]

Dave,
Duh! Right? I knew it was running twice, just not sure why. I was so involved in the guts of the thing, I didn't even look up to see what was initializing the script. Thank you for the quick reply.
More questions...
Can you have more than one call to foundation() in different files and or functions?
So I could have a function in that document

Code: Select all

$('#menu1').on("loaded", function (){
$(document).foundation()
}
$('#menu2').on("loaded", function (){
$(document).foundation()
}

Or would you run all the functions then call foundation?

Code: Select all

$('#menu1').on("loaded", function (){
//do stuff
}
$('#menu2').on("loaded", function (){
//do stuff
}
$(document).foundation();

Does jQuery run scripts in order?

Looking up these and other questions, but if you have time to answer, thanks again!
And THANK YOU! for the initialization script! It has been such a great place to start for my project!! So much gratitude coming your way!

Chrisitna

[NorthEast]

I've not tried this, but rather that initialise Foundation on the whole page - $(document), you may be able to initialise the individual menus; e.g. assuming the menus have containers with IDs #menu1 and #menu2:

Code: Select all

$('#menu1').on("loaded", function (){
   $('#menu1').foundation();
}
$('#menu2').on("loaded", function (){
   $('#menu2').foundation();
}

See if that works first.

Glad the script has helped. MadCap included an accordion menu with the side nav skin in Flare 2018, so I'm hoping they release that as a separate skin/proxy menu at some point.

[chmchm]

Hi Dave, thanks for the response.

I managed to get them not giving any warnings, but the random behavior persisted.
The thing that made a difference was calling them each individually, as you suggested. They still give me a warning, but the accordions load and act as expected.

Thanks again for your help and your suggestions! I don't know that I would have thought of it without them!

Have a great weekend!
Christina