-
- 463 Posts
Trying to show / hide some items using Zurb Foundation 3 (Flexibility add on) but I can't get the content to toggle i.e. I can get the content to show but then I can't hide it again. Here is my Tpl:
<div class="four columns">
[[+icon]]
<h2>[[+pagetitle]]</h2>
<ul id="[[+id]]" class="accordion">
<li>
<div class="title">
<h3>[[+longtitle]]</h3>
</div>
<div class="content">
[[+imagehome]]
<p>[[+introtext]]</p>
</div>
</li>
</ul>
</div>
I found this script but can't get it to work:
<script>
$(function() {
$( "#accordion" ).accordion({
collapsible: true
});
});
</script>
Would be grateful for any ideas - fantastic add-on by the way.
[ed. note: chrisandy last edited this post 10 years, 8 months ago.]
Your script is targetting an accordion ID you need to change it to target the accordion class like this:
<script>
$(function() {
$( ".accordion" ).accordion({
collapsible: true
});
});
</script>
-
- 463 Posts
Thank you but already tried that and just tried again to be sure.
-
- 463 Posts
Error:
ReferenceError: Can't find variable: $
I'm not quite ready for Foundation 4 yet so still using Flexibility 3.0.6
Is jQuery being referenced before this script tag? Sounds like it's not.
-
- 463 Posts
Quote from: benmarte at Jul 24, 2013, 02:19 PMIs jQuery being referenced before this script tag? Sounds like it's not.
Do you mean the order in which things are being called i.e:
<script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>
<script>
$(function() {
$( ".accordion" ).accordion({
collapsible: true
});
});
</script>
...or something else - sorry I'm a designer not into js.
Yes, make sure you have another script tag before that is referencing the jQuery library before any other js file otherwise it won't work.
To test place replace the code you posted with this:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>
<script>
$(function() {
$( ".accordion" ).accordion({
collapsible: true
});
});
</script>
If it works then you are either missing the reference to the jQuery library or it is being called after your plugin.
Good luck.
-
- 463 Posts
Well I was doing everything right by the looks of it. I replaced the following files directly from Foundation Zurb:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="assets/templates/flexibility/javascripts/jquery.foundation.accordion.js"></script>
...and it works. The files are slightly different from those that ship with Flexibility.
Thanks for your help - jQuery was being called as:
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
☆ A M B ☆
☆ A M B ☆