Accordion menu not working

Hello, I am new to foundation and I have some problems even at my first try to build something.

So, I downloaded Foundation 6 and in the index.html I inserted an accordion menu by copying the code on the site. I tried it on 3 different computers and none of them worked.

The menu shows but it is already expanded and there is no arrow that you can click to make it close.

Any ideas?

Please check the browser console. There should be some error(s). You probably forgot to include jQuery.

Ok, thank you for your answer, but how can I do that? It seems to me this is something for the advanced developer to know. How would a simple user that will use my website know how to do that?

But it couldn’t be a broswer issue because on the foundation site this kind of menu works perfectly. It must be something in the code. Please note that I am beginning to learn php and foundation so I am pretty new to this.

Can you share a screenshot of your browser console?

You are using Foundation Sites 5.5.3. Foundation 5 is a very old and outdated version. v6.6.3 is the latest version.

And you might want to wrap $(document).foundation(); inside of this:

$(function() {
  // Handler for .ready() called.
});

Sorry. My mistake. I don’t know how that got there. Here is the new situation.

Please reload the page, there should be errors. You probably opened the console after the page was reloaded.

I reloaded the page. The console is empty. As I said, i tried it on different computers with different browsers. And it’s the original code downloaded from get.foundation

Can you try doing it from scratch? Maybe it’s a bug on their documentation…

Wait, it seems in your last screenshot you do not call $(dcoument).foundation(); to initialize all components. Please try that.

Your current code is basically this: https://codepen.io/DanielRuf/pen/YzqPYNV

This is the working version: https://codepen.io/DanielRuf/pen/QWNwadJ

The docs are correct.

Ok. Thank you for yout efforts. It works now. I added the $(document).foundation(); line to the end of foundation.js file. I don’t understand why it wasn’t already there.
Anyway, it works but without the small arrow to indicate that there are sub menus available. How do I put that? Thx

The foundation.js file should not contain this line. The file contains only Foundation Sites itself. There is no line in there which starts the initialization. See the installation docs.

You should create your own script.js or similar, load it after foundation.js, and in there add the $(document).foundation(); line to initialize all components. Best is to use jQuery.ready (see Accordion menu not working).

I see the arrow on the right side: https://codepen.io/DanielRuf/pen/QWNwadJ

Please check if the css file is correctly loaded and inspect the element to see if something overwrites this. It is the :after pseudo element:

Ok. Thank you very much for your efforts. I will get more into the documentation and follow step by step instructions.
Have a great day…