Menu icon Foundation
Accordion, Tabs don't function

Accordion and tags doesn't work at all.

How comes that even basic simple functionalities doesn't work on a basic project?

Obviously I'm not the only one, did somebody found how to fix it?
I installed the package 3 times, just to be sure.

Are they really getting paid at ZURB to develop systems with simple things like tabs and accordion not functioning in 2015?

accordiontabs

Accordion and tags doesn't work at all.

How comes that even basic simple functionalities doesn't work on a basic project?

Obviously I'm not the only one, did somebody found how to fix it?
I installed the package 3 times, just to be sure.

Are they really getting paid at ZURB to develop systems with simple things like tabs and accordion not functioning in 2015?

Shoaib Iqbal almost 5 years ago

Hi, can you post your code, you might missed including foundation js file and init the foundation js, Do you have the following code in your page?

  <script>
      $(document).foundation();
    </script>

Rafi Benkual almost 5 years ago

Rafi from ZURB here -
Here's an example of tabs and accordions working http://codepen.io/rafibomb/pen/YPrqXe

In case you were referring to adding one into the other I tested that too http://codepen.io/rafibomb/pen/WbZwvB

Also checking the docs, they are working there http://foundation.zurb.com/docs/components/accordion.html
http://foundation.zurb.com/docs/components/tabs.html

As Shoaib mentioned, if you post a link to the site or your code, I'm sure we can help find the issue.

Timothy Griffin almost 5 years ago

I have also been struggling with the accordion function. I have copied the code straight from your example and the Foundation site. Nothing works for me. I know I have a small little simple mistake in my code. any assistance is always apprecieated.

thank you

<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>Certificate Programs</title>
  <link rel="stylesheet" href="css/foundation.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>
  <!-- Other JS plugins can be included here -->

  <script>
    $(document).foundation();

  $(document).foundation({
  offcanvas : {
    // Sets method in which offcanvas opens.
    // [ move | overlap_single | overlap ]
    open_method: 'overlap', 
    // Should the menu close when a menu link is clicked?
    // [ true | false ]
    close_on_click : false
  }
});
  </script>
  <!--




-->
  </style>
  </head>

  <body>

<!--mast head code  -->
<div class="row">


    <ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</ul

  ></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>

Bill Bell almost 5 years ago

I don't use Accordian but Tabs work perfectly. I had to override some CSS parameters to get it looking like I wanted it. I even have Tabs inside Tabs. It works on small platform devices like a smartphone. Foundation 4 had problems with small platforms.

Shoaib Iqbal almost 5 years ago

Hi Timothy, you have included foundation js files and jQuery multiple times, this is causing it NOT to work properly.

Try this code

<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>Certificate Programs</title>
  <link rel="stylesheet" href="css/foundation.css" />
  <link href="customized_found.css" rel="stylesheet" type="text/css">
  <script src="js/vendor/modernizr.js"></script>
</head>

<body>

<!--mast head code  -->
<div class="row">


    <ul class="accordion" data-accordion>
  <li class="accordion-navigation">
    <a href="#panel1a">Accordion 1</a>
    <div id="panel1a" class="content active">
      Panel 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel2a">Accordion 2</a>
    <div id="panel2a" class="content">
      Panel 2. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>
  </li>
  <li class="accordion-navigation">
    <a href="#panel3a">Accordion 3</a>
    <div id="panel3a" class="content">
      Panel 3. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </div>

</ul

  ></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>

Rafi Benkual almost 5 years ago

@Tim -
Is there any reason these are in the head? I would remove them

  <script src="js/vendor/jquery.js"></script>
  <script src="js/foundation/foundation.js"></script>
  <script src="js/foundation/foundation.equalizer.js"></script>

Also in your body you don't need:

 <script src="js/foundation/foundation.accordion.js"></script> 

because foundation.min.js has all the plugins.

I pasted your markup in this codepen and it works http://codepen.io/rafibomb/pen/MYEmMm
So it must be the paths to the JS.

You can copy the template from http://foundation.zurb.com/docs/css.html if needed.

Timothy Griffin almost 5 years ago

Working great. Thank you. I knew I had an error in my code , just could not see it