$不是一个功能。 （在'$（“。accordion”）'中，'$'未定义）

Question

I've been building a little jQuery accordion this afternoon based off a codepen I found, it works fine unless I put it in Wordpress where i need it. I know it's probably something obvious but i've spent too many hours looking at it now and i feel like i'm going in circles.

Here's my wordpress code using some custom fields from ACF:

<aside class="accordion">
<div>
<span class="col-2 showitem"><?php the_field('show_date'); ?></span>
<span class="col-4 showitem"><?php the_title(); ?></span>
<span class="col-4 showitem"><?php the_field('show_city'); ?></span>
<span class="col-2 showitem">?php the_field('ticket_status'); ?></span>
</div>
<?php the_field('show_information'); ?>
</aside>

And my script on the page.php:

<script type="text/javascript">
var headers = ["H2"];

$(".accordion").click(function(e) {
var target = e.target,
name = target.nodeName.toUpperCase();

if ($.inArray(name, headers) > -1) {
var subItem = $(target).next();

//slideUp all elements (except target) at current depth or greater
var depth = $(subItem).parents().length;
var allAtDepth = $(".accordion p, .accordion div").filter(function() {
if ($(this).parents().length >= depth && this !== subItem.get(0)) {
return true;
}
});

$(allAtDepth).slideUp("fast");

//slideToggle target content
subItem.slideToggle("fast", function() {});
}
});
</script>

I should also mention I am using this Ajax Load More extension on the site and when i remove anything to do with that from the page and just keep things simple, it works. so i'm 99% sure it has to do with the interactivity of both things. But jQuery is not my bag so I'm hoping someone smarter than me know where i went wrong.

I also have the P as display:none; because otherwise it shows up all the time.

Thanks for looking at my question!

JD :)

p.s, the original codepen is here http://codepen.io/rbobrowski/pen/likvA/

Update: I tried changing all $ to jQuery, then jquery. I also tried both of @jai's suggestions with no luck. I also tried the solution @freedomn-m linked to as well as checking and testing methods from multiple links in the search results with no luck.

Answer 1

In wordpress $ sign is not available, instead you could change it to jQuery or put the code in an IIFE and you need to put the event bindings in doc ready block:

(function($){ // get it with '$'
   $(function(){ // <---doc ready block
      // put all the code in here

   });
})(jQuery); // <---pass jQuery here

Actually you need to put your code inside doc ready block but use jQuery as a wrapper and use $ in the args:

jQuery(function($){ // use jQuery and pass `$` for a reference to jQuery.
   // code here.
});