How to make my javascript code responsive?

Question

how to tell my simple jquery code to activate the click on my .filter_btn

only when I'm on a mobile or tablet (max-width: 768px)

and not on a desktop?

<script>

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

jQuery(function($){

$('.filter_btn').click(function(event){

$('.content_filter').slideToggle('250','swing','hide');

});
});
});

</script>

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

as you can see here i can click in desktop mode

Answer 1

You could validate the width of the window by using the window.innerWidth property. Something like:

<script>

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

    jQuery(function($){

        $('.filter_btn').click(function(event){
            //Here we validate the size of the window, I've had this act wonky
            //before, so you may have to adjust the value
            if(window.innerWidth <= 768) {
                $('.content_filter').slideToggle('250','swing','hide');
            }
        });
    });
});
</script>

Answer 2

You already have a media query set up to hide content over the specified screensize, but you are hiding the.content-filter. If you don't want the.filter_btn to be clicked, then hide it.

If you still want the header to be visible, then have two versions of the header: one that is displayed for small screens that IS clickable, and one that displays on large screens and is not clickable.