Menu icon Foundation
Need Accordion Help

Hi there

I have been able to insert and see various version of Accordion

List Items are missing - I am pretty sure that my javascript is not setup correctly. The problem is that I have found different ways to include the files and being newer to this do not know what is the correct way to do this. When I setup my project I did the entire download, when I search I do find that accoridon is included. 

Here is what I have in the head:

 

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meeples Board Game Cafe</title>
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="https://use.fontawesome.com/e4b7d87049.js"></script>
  <script src="/js/vendor/modernizr.js"></script>
  <link href="scripts/foundation.css" rel="stylesheet" />

and what is @ the bottom:

 

<script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/app.js"></script>
  <script src="js/foundation.accordionMenu.js"></script>
  <script src="/js/vendor/foundation.min.js"></script>
  <script>
   $(document).ready(function() {
      $(document).foundation();
   })

and here is what is installed:

and what is in my app.js file:

 

$(document).foundation()


function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

 

Can you please tell me where I am going wrong - thank you

accordionjavascript

Hi there

I have been able to insert and see various version of Accordion

List Items are missing - I am pretty sure that my javascript is not setup correctly. The problem is that I have found different ways to include the files and being newer to this do not know what is the correct way to do this. When I setup my project I did the entire download, when I search I do find that accoridon is included. 

Here is what I have in the head:

 

<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Meeples Board Game Cafe</title>
  <link rel="stylesheet" href="css/foundation.css">
  <link rel="stylesheet" href="css/app.css">
  <script src="https://use.fontawesome.com/e4b7d87049.js"></script>
  <script src="/js/vendor/modernizr.js"></script>
  <link href="scripts/foundation.css" rel="stylesheet" />

and what is @ the bottom:

 

<script src="js/vendor/jquery.js"></script>
  <script src="js/vendor/what-input.js"></script>
  <script src="js/vendor/foundation.js"></script>
  <script src="js/app.js"></script>
  <script src="js/foundation.accordionMenu.js"></script>
  <script src="/js/vendor/foundation.min.js"></script>
  <script>
   $(document).ready(function() {
      $(document).foundation();
   })

and here is what is installed:

and what is in my app.js file:

 

$(document).foundation()


function myMap() {
var mapProp= {
    center:new google.maps.LatLng(51.508742,-0.120850),
    zoom:5,
};
var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);
}

 

Can you please tell me where I am going wrong - thank you

Joyce Veal over 2 years ago

More informative coding i have got here.

AshleyCatron over 2 years ago

Good work really appreciate.

teri pastorino over 2 years ago

But the information is not showing! so something is wrong with the load order of the scripts and file links, I have fussed around with changing the order, but being a newbie I am unsure what needs to load when. Help Please/thanks!

Rafi Benkual over 2 years ago

Hi Teri,

There seems to be too many js files and some of them are out of order.

The default build or download looks like:

All of the scripts below jquery depend on jquery so it is first.

teri pastorino over 2 years ago

Hi Rafi

Thanks I deleted all files and put in just what you are showing. Before, with whatever nonsense I had, the arrows showed and clicked and it would look like everthing expanded, Now all I see is an empty screen. 

Here is what I now have:

Head:

and @ bottom"