jQuery скрыть меню если ширина окна меньше 500px

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

HTML:

<div class="categoryitem spoiler-wrapper">
            <div class="spoiler folded"><a href="javascript:void(0);">Категории</a></div>
            <div class="spoiler-text">
                <?php **этот php код отвечает за вывод рубрик** ?>
            </div>
        </div>

jQuery:

<script>
jQuery(document).ready(function() {
if (  jQuery(window).width() > 500 ) {
        jQuery('.spoiler-text').hide()
        jQuery('.spoiler').click(function(){
            jQuery(this).toggleClass("unfolded").toggleClass("folded").next().slideToggle()
        })
}
});
</script>

Этот код в принципе работает, но на любой ширине экрана,