Get a multiple level dropdown to only appear at a certain browser width

Get a multiple level dropdown to only appear at a certain browser width

I'm trying to create a list of links that are visible on desktop and
tablet but when you resize it down to mobile size it becomes part of a
multilevel drop down. I've got it to work but only when I refresh the
page.
Please bare with me as I am a noob at js.
I've tried working two different pieces of js that I've found on tutorials
and I'm sure there would be a simpler way of accomplishing this.
html
<ul class="accordion">
<li>
<a href="#">America</a>
<ul>
<li><a href="#">New York</a></li>
<li><a href="#">San Fransisco</a></li>
<li><a href="#">Washington</a></li>
</ul>
</li>
<li>
<a href="#">Antarctica</a>
</li>
<li>
<a href="#">Afro-Eurasia</a>
<ul>
<li><a href="#">Amsterdam</a></li>
<li><a href="#">Paris</a></li>
<li><a class="#">Stockholm</a></li>
</ul>
</li>
<li>
<a href="#">Australia</a>
<ul>
<li><a href="#">Melbourne</a></li>
<li><a href="#">Perth</a></li>
<li><a href="#">Sydney</a></li>
</ul>
</li>
<li>
<a href="#">Google</a>
</li>
</ul>
and js
(function($){
$(document).ready(function(){
var current_width = $(window).width();
if(current_width < 480){
jQuery('body').addClass("mobile");
}
});
$(window).resize(function(){
var current_width = $(window).width();
if(current_width < 480){
jQuery('body').addClass("mobile");
}
});
})(jQuery);
$(document).ready(function() {
$('.mobile .accordion ul').hide();
$('.mobile .accordion li a').click(
function() {
var openMe = $(this).next();
var mySiblings = $(this).parent().siblings().find('ul');
if (openMe.is(':visible')) {
openMe.slideUp('normal');
} else {
mySiblings.slideUp('normal');
openMe.slideDown('normal');
}
}
);
});