jQuery if/else view/hide layer

Question

I'm making a responsive website slide bar in edge animate, and I've made 2 slides for 1 slide (So they can adjust responsibly). I want the second slide to show if the window width is below 786px and the first slide to show if it's above. This is the code I used:

var n = $(window).width();
if (n > 768) {
    // Show an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_01_photo").show();
    // Hide an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_02_photo").hide();
}
else {
    // Show an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_02_photo").show();
    // Hide an Element.
    //  (sym.$("name") resolves an Edge Animate element name to a DOM
    //  element that can be used with jQuery)
    sym.$("#panel_01_photo").hide();
}

For some reason it doesn't work. Thanks for anyone who helps.

Answer 1

$(window).on('resize', function() {
    var n = $(window).width();
    sym.$("#panel_01_photo").toggle(n > 768);
    sym.$("#panel_02_photo").toggle(n < 768);
});