div slider based on document width

Question

I have a div that slides out when clicked upon (#close-bar). This is working fine, but I want it to only be visible with the other functions that get fired when doc width is 480px but be hidden on doc width above 480px.

This is the sample on 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')
            }

        });

Thanks -Sohail

Answer 1

I think it's sufficient to hide it via CSS above 480px (jsFiddle), right?

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