JSFiddle - React, Tailwind, and code Playground

by Larry Lane

HTML

<div class="jobfilter">
    <p>content</p>
    <p>content</p>
</div>

CSS

html,body{
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}
p{
    margin: 0;
    padding: 0;
}

.jobfilter{
    height: 100%;
    background: orange;
    width: 100px;
}
.hidden{
    transform: translateX(-100%);
}

JavaScript

/*
document ready function used to prevent conflict with other javascript libraries
that use the $ parameter
*/
jQuery(document).ready(function($){

     //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;

          //if the window width is less than the maxWidth pixels on document loading
          if(winWidth < maxWidth){//begin if then
             
            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");
             
         }//end if then
               


$(window).resize(function(){//begin resize event
     
     
    //get the window width
     var winWidth =  $(window).width();

      //set the maxWidth
     var maxWidth = 1000;    
     
          
         //if the window width is less than maxWidth pixels
         if(winWidth < maxWidth){//begin if then
             
            //add the class hidden to .jobFilter         
            $(".jobfilter").addClass("hidden");
             
         }
         else{
            
            //remove the class hidden                 
            $(".jobfilter").removeClass("hidden");
             
                    
     }//end if then else
      
      
     });//end window resize event
    
});//end document ready function