when alternating the display on the browser (F12) from mobile or responsive to desktop the div (content_filter) disappears.. refresh the page to fix the bug.

Desktop view

from what I understand I need to add a Window: resize event to avoid refreshing each time. my level in javascript is completely beginner. can you show me the correct technique with my code?

<script>

        document.addEventListener('DOMContentLoaded', function () {
            jQuery(function ($) {

                $('.filter_btn').click(function (event) {
                    if (window.innerWidth <= 768) {
                        $('.content_filter').slideToggle('250', 'swing', 'hide');
                    }
                });
            });
        });
    </script>

    <style >
        @media all and(max - width: 768 px) {
            .content_filter {
                display: none;
            }
        } 
</style>