Menu icon Foundation
Can't get dropdowns, Acooridians or Modal to work

I am new to using Foundation. I am having a problem getting Dropdowns, Accordions or Model to work. I have copied the code directly from the doc page , but will not work. I know I am missing a config or something like that. Can anyone point in a direction on what to look at.

dropdownaccordiionmodal

I am new to using Foundation. I am having a problem getting Dropdowns, Accordions or Model to work. I have copied the code directly from the doc page , but will not work. I know I am missing a config or something like that. Can anyone point in a direction on what to look at.

Rafi Benkual almost 5 years ago

Check to make sure jQuery is defined and Foundation JS

Inspect your page and look in the console for errors.

You should have both defined before the closing body tag

   <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation.min.js"></script>
  <script>
    $(document).foundation();
  </script>
</body>

Timothy Griffin almost 5 years ago

thank you. I appears I had the above in the incorrect location.

Timothy Griffin almost 5 years ago

I continue to have problems getting the accordion to work on my page. I created a page with just the sample code for the accordion and it will not open at all. I looked in the console and see no errors. Any guidiance on where to look is appreciated.

code from test page:

<!doctype html>
<html class="no-js" lang="en">
<head>
<meta  CONTENT="NO-CACHE"/>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Foundation | Welcome</title>
<link rel="stylesheet" href="css/foundation.css" />
<link href="customized_found.css" rel="stylesheet" type="text/css">
<link href="customized_found.css" rel="stylesheet" type="text/css">
<script src="js/vendor/modernizr.js"></script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.equalizer.js"></script>
</head>
<body>

<!--Begin page content -->
<div class = "row">
<div class = "large-12 columns panel">
  <ul class="small-block-grid-1 medium-block-grid-3">
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel1c">Accordion 1</a>
          <div id="panel1c" class="content"> Panel 1. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel2c">Accordion 2</a>
          <div id="panel2c" class="content"> Panel 2. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel3c">Accordion 3</a>
          <div id="panel3c" class="content"> Panel 3. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
    <li>
      <ul class="accordion" data-accordion="myAccordionGroup">
        <li class="accordion-navigation"> <a href="#panel4c">Accordion 4</a>
          <div id="panel4c" class="content"> Panel 4. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel5c">Accordion 5</a>
          <div id="panel5c" class="content"> Panel 5. Lorem ipsum dolor </div>
        </li>
        <li class="accordion-navigation"> <a href="#panel6c">Accordion 6</a>
          <div id="panel6c" class="content"> Panel 6. Lorem ipsum dolor </div>
        </li>
      </ul>
    </li>
  </ul>
  <!--end page content--> 

</div>
</div>
<script src="js/vendor/jquery.js"></script> 
<script src="js/foundation.min.js"></script>
<script src="js/foundation/foundation.accordion.js"></script> 
<script>
      $(document).foundation();
    </script>
</body>
</html>