The “Failed to load resource” is probably a red herring and isn’t related to your issue. The fact that it is throwing an error about the $
shortcut means your js file is being loaded correctly.
The likely issue is that jQuery in WordPress loads in “noConflict” mode. As such the $
shortcut will not work by default. Try replacing your script with this:
<script type="text/javascript">
jQuery(".menu-button").click(function () {
jQuery(this).parents(".wrapper").toggleClass("show-menu");
});
</script>
Or, alternatively if you really like the $
shortcut:
<script type="text/javascript">
(function($) {
$(".menu-button").click(function () {
$(this).parents(".wrapper").toggleClass("show-menu");
});
})(jQuery);
</script>
There is also an issue with the logic in your javascript. The line
$(this).parents(".wrapper").toggleClass("show-menu");
Will not work as expected. jQuery.parents()
returns a set of results while jQuery.toggleClass()
expects a single element. If you know that the element directly above show-menu
will always be wrapper
and that is the only element you wish to effect, then you can simply swap that line out for this
$(this).parent(".wrapper").toggleClass("show-menu");
Alternatively, if wrapper
can be an arbitrary height above show-menu
, you will need something like this
<script type="text/javascript">
jQuery(".menu-button").click(function () {
jQuery(this).parents(".wrapper").each(function(){
jQuery(this).toggleClass("show-menu");
});
});
</script>
Incidentally, the reason you are getting that “Not Found” error is because transitions.js
does not exist at this url: https://generation-co.co/wp-content/themes/twentyfifteenG-CHILD/js/transition.js