Can't get Zurb Foundation accordion to work
Question
I'm using Zurb's Foundation, attempting to build a FAQ page using the accordion js. But it's not working and I have no idea why. All the js files are in the js folder. Here's my whole page:
<html class="no-js" lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/app.css">
<script src="js/vendor/modernizr.js"></script>
</head>
<body>
<div class="row row-padding">
<div class="small-12 columns">
<h1>FAQ:<h1>
</div>
</div>
<div class="row row-padding small-12">
<ul class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel13a">Question</a>
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
<script>
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
</body>
</html>
I'm brand new to HTML websites, so sorry if it's something stupid.
2 answers
solution1
1 ACCPTED 2015-06-09 13:51:08
You are targeting your accordion with an id that doesn't exist in your HTML.
You'll need to add the id to your HTML like this:
<div class="row row-padding small-12">
<ul id="myAccordionGroup" class="accordion" data-accordion>
<li class="accordion-navigation">
<a href="#panel13a">Question</a>
<div id="panel13a" class="content">
Answer
</div>
</li>
</ul>
</div>
Also change the order of your scripts so that your custom accordion loads after everything else.
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.accordion.js"></script>
<script>
$(document).foundation();
$('#myAccordionGroup').on('toggled', function (event, accordion) {
console.log(accordion);
});
</script>
Here is a working CodePen: http://codepen.io/anon/pen/jPmRyB
solution2
0 2015-06-08 20:16:09
You forgot about $(document).foundation();
http://foundation.zurb.com/docs/javascript.html - Initialize Foundation
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.