Menu icon Foundation
Accordion does not work

I downloaded the Foundation6.2. As a beginner to the foundation template, I tried to use accordion in a FAQ page, but it does not work, it does not respond to the clicks on the headers. Who could tell me where is wrong? Following is the code. Thank you for help!

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>FAQ</title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/foundation/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>   
</head>

<body>
<div>
	<h1>This is the FAQ page</h1>  
</div>

<div>
	<ul class="accordion" data-accordion>
	  <li class="accordion-navigation">
		<a href="#1">This is question 1</a>
		<div id="1" class="content active">
		  Yes, here is it.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#2">This is question 2</a>
		<div id="2" class="content">
		  It is blue.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#3">This is question 3</a>
		<div id="3" class="content">
		  hello, how are you.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#4">This is question 4</a>
		<div id="4" class="content">
		  good morning!
		</div>
	  </li>
	</ul>
</div>

<script>
$(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
});
</script>

</body>
</html>

accordion not work

I downloaded the Foundation6.2. As a beginner to the foundation template, I tried to use accordion in a FAQ page, but it does not work, it does not respond to the clicks on the headers. Who could tell me where is wrong? Following is the code. Thank you for help!

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>FAQ</title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/foundation/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>   
</head>

<body>
<div>
	<h1>This is the FAQ page</h1>  
</div>

<div>
	<ul class="accordion" data-accordion>
	  <li class="accordion-navigation">
		<a href="#1">This is question 1</a>
		<div id="1" class="content active">
		  Yes, here is it.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#2">This is question 2</a>
		<div id="2" class="content">
		  It is blue.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#3">This is question 3</a>
		<div id="3" class="content">
		  hello, how are you.
		</div>
	  </li>
	  
	  <li class="accordion-navigation">
		<a href="#4">This is question 4</a>
		<div id="4" class="content">
		  good morning!
		</div>
	  </li>
	</ul>
</div>

<script>
$(document).foundation({
  accordion: {
    // specify the class used for accordion panels
    content_class: 'content',
    // specify the class used for active (or open) accordion panels
    active_class: 'active',
    // allow multiple accordion panels to be active at the same time
    multi_expand: true,
    // allow accordion panels to be closed by clicking on their headers
    // setting to false only closes accordion panels when another is opened
    toggleable: true
  }
});
</script>

</body>
</html>
Brian Tan over 3 years ago

I believe this is an old FAQ for earlier version of Foundation.

Please refer to the new documentation for syntax. http://foundation.zurb.com/sites/docs/accordion.html

Mike T over 3 years ago

Thank you Brian! I updated the scripts to be compatible with the Foundation 6.2 standards.  Now the accordion works in IE, but it still does not respond to the clicks on headers in Google Chrome browser and Firefox, I don't know where is wrong. Thank you for help!

<!DOCTYPE html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width"/>
<title>FAQ</title>
<link rel="stylesheet" href="css/foundation.min.css">
<script src="js/vendor/jquery.min.js"></script>
<script src="js/foundation.min.js"></script>   
<script src="js/foundation.accordion.js"></script> 
<script src="js/foundation.core.js"></script> 
<script src="js/foundation.util.keyboard.js"></script> 
<script src="js/foundation.util.motion.js"></script> 
</head>

<body>
<div>
	<h1>This is the FAQ page</h1>  
</div>

<div>
	<ul class="accordion" data-accordion data-multi-expand="true"  data-allow-all-closed="true">
	  <li class="accordion-item is-active" data-accordion-item>
		<a href="#1"  class="accordion-title">This is question 1</a>
		<div id="1" class="accordion-content" data-tab-content>
		  Yes, here is it.
		</div>
	  </li>
	  
	  <li class="accordion-item" data-accordion-item>
		<a href="#2" class="accordion-title">This is question 2</a>
		<div id="2" class="accordion-content" data-tab-content>
		  It is blue.
		</div>
	  </li>
	  
	  <li class="accordion-item" data-accordion-item>
		<a href="#3" class="accordion-title">This is question 3</a>
		<div  id="3" class="accordion-content" data-tab-content>
		  hello, how are you.
		</div>
	  </li>
	  
	  <li class="accordion-item" data-accordion-item>
		<a href="#4" class="accordion-title">This is question 4</a>
		<div id="4"  class="accordion-content" data-tab-content>
		  good morning!
		</div>
	  </li>
	</ul>
</div>

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

</body>
</html>

 

Brian Tan over 3 years ago

If you downloaded "Complete" package, this is all you need for scripts

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

foundation.min.js already includes all components. "Complete" package does not provide the individual js components, you probably copied them from somewhere else and it causes duplication and errors.

Mike T over 3 years ago

Thank you Brian. Because the Foundation custom download button is unavailable, I downloaded the custom edition Foundation files from other websites.


I followed your advice, replaced the three files foundation.min.css, jquery.min.js, foundation.min.js with the ones located in the complete Foundation download file complete-f6.zip (version 6.2), and deleted foundation.accordion.js, foundation.core.js, foundation.util.keyboard.js, foundation.util.motion.js.

Now the accordion  works in Firefox, IE and Google chrome. Thank you very much!