div слайдер на основе ширины документа

Question

У меня есть div, который открывается при нажатии (# close-bar). Это работает нормально, но я хочу, чтобы он был видимым только с другими функциями, которые срабатывают, когда ширина документа составляет 480 пикселей, но должна быть скрыта при ширине документа выше 480 пикселей.

Это sample на jsfiddle.

$(function() { 
    $(window).resize(ChangeDiv); 
    $(window).trigger("resize"); 
}); 

function ChangeDiv() { 
    var width = $(window).width(); 
    if (width <= 480) { 
     $("#menu").after($("#header")); 
     $("#headerRight form").prependTo($("#footer")); 
    } else { 
     $("#header").after($("#menu")); 
     $("#footer form").appendTo($("#headerRight")); 
    } 
} 

var speed = 300; 
     $('#close-bar').on('click', function(){ 

      var $$ = $(this), 
       panelWidth = $('#hiddenPanel').outerWidth(); 

      if($$.is('.myButton')){ 
       $('#hiddenPanel').animate({right:0}, speed); 
       $$.removeClass('myButton') 
      } else { 
       $('#hiddenPanel').animate({right:-panelWidth}, speed); 
       $$.addClass('myButton') 
      } 

     }); 

Благодаря -Sohail

Answer 1

Я думаю, что это достаточно, чтобы скрыть это с помощью CSS выше 480px (jsFiddle), не так ли?

@media only screen and (min-width:480px) 
{ 
    #close-bar { 
     display:none; 
    } 
}