Получите многоуровневый раскрывающийся список, отображаемый только при определенной ширине браузера.

Я пытаюсь создать список ссылок, которые будут видны на рабочем столе и планшете, но когда вы уменьшаете его размер до размера мобильного устройства, он становится частью многоуровневого раскрывающегося списка. У меня это работает, но только когда я обновляю страницу.

Я пробовал работать с двумя разными частями js, которые я нашел в уроках, и я уверен, что был бы более простой способ сделать это.

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>

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);

JS для выпадающего

$(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');
            }
          }
    );
});