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