jQuery if/else view/hide layer

Question

Я делаю отзывчивую панель слайдов веб-сайта в оправой, и я сделал 2 слайда для 1 слайда (чтобы они могли настраиваться ответственно). Я хочу, чтобы второй слайд показывал, если ширина окна ниже 786 пикселей, а первый слайд показывает, если он выше. Это код, который я использовал:

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

По какой-то причине он не работает. Спасибо всем, кто помогает.

Answer 1

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