Can not resolve Uncaught ReferenceError: jQuery is not defined

Hi I have a problem I just can not resolve. I have a mobile menu which works fine in the browser but only works on smartphone after refreshing the page

I get

Uncaught ReferenceError: jQuery is not defined

Here is the code, and below that is the order in which the scripts load

 (function($) { $.fn.collapsable = function(options) { return this.each(function() { var obj = $(this); var tree = obj.next('.main-menu ul'); obj.click(function() { if (obj.is(':visible')) { tree.toggle(); } }); $(window).resize(function() { if ($(window).width() <= 800) { tree.attr('style', ''); }; }); }); }; })(jQuery); $(document).ready(function() { $('.slide-trigger').collapsable(); }); 

(analytics code loads first top of the page www.google-analytics.com/analytics.js)

rest of the script loads from the footer all inside the body the mobile-menu.js relates to the code above.

<script async src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js" type="text/javascript"></script> <script async src="js/mobile-menu.js" type="text/javascript"></script> <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <script async>(adsbygoogle = window.adsbygoogle || []).push({});</script> <script async>(adsbygoogle = window.adsbygoogle || []).push({});</script> <script async>(adsbygoogle = window.adsbygoogle || []).push({});</script> 

I have searched so many links on stackoverflow and other websites for an answer. I have tried no conflict i have swapped the order in which the other scripts load but nothing.

Please. Many thanks for looking.