JSFiddle - React, Tailwind, and code Playground

by LyndseyB

JavaScript

function debounce(func, wait, immediate) {
    var timeout;
    return function() {
        var context = this, args = arguments;
        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

function expandableItems(el, num, numMd, numSm, numSl){
   "use strict";
	
  var expItems = $(el).find('.expandable__trigger'),
			debounceTime = 250;
      
  var changeNum = function(){   
  	var windowWidth = $(window).width(),
    		theNumber = 0;

		 
   return (function() {
   		if(windowWidth < 641){
        theNumber = numSl;
      } else if(windowWidth > 641 && windowWidth < 768){
        theNumber = numSm;
      } else if(windowWidth > 769 && windowWidth < 980){
        theNumber = numMd;
      } else if(windowWidth > 981){
        theNumber = num;
      }  
      return theNumber;
   })();      
    
  );
  
	window.addEventListener('resize', changeNum);
  console.log(changeNum());
  
         
        for(var i = 0; i < expItems.length; i = i+=changeNum()){
	    expItems.slice(i, i+changeNum()).wrapAll('<div class="expandable__row o-grid o-grid--equal-height o-grid--gutter-lg"></div>');
	}

}

expandableItems('.my-selector', 4, 3, 2, 1);