Add and remove classes on resize I'm just a bit confused and can not write or simplify a jQuery code, that adds or removes classes based on the viewport size. I'm pretty sure there's a simpler and more efficient way to write that trivial code. Unfortunately I can not get it. 

Here is the current status:

    // initial state
    if ($(window).width() &lt;= 900) {
        $('.readmoresection span.handler').show();
        $('.readmoresection').addClass('reduced');
    }else{
        $('.readmoresection span.handler').hide();
        $('.readmoresection').removeClass('reduced');
    }       

    // on resize
    $(window).on('resize', function(){
        if ($(window).width() &lt;= 900) {
            $('.readmoresection span.handler').show();
            $('.readmoresection').addClass('reduced');
            if($('.readmoresection').hasClass('reduced')){
                $('.readmoresection span.handler').html(' » Weiterlesen');
            }else{
                $('.readmoresection span.handler').html(' » Schließen');
                $('.readmoresection').removeClass('reduced');
            }
        }
        else{
            $('.readmoresection span.handler').hide();
            $('.readmoresection').removeClass('reduced');
        }   
    });


Does anyone know a cleaner way?
I've used matchMedia() quite a bit in the past, it works quite well:
https://github.com/paulirish/matchMedia.js/

Example:

if (matchMedia('only screen and (max-width: 480px)').matches) {
  // smartphone/iphone... maybe run some small-screen related dom scripting?
}


Also instead of individually doing .addClass('class') and .removeClass('class') you could use .toggleClass('class').