Enquire.js in element array (javascript)

Question

The code in question is here: https://jsfiddle.net/ozeasa8t/

Objective is to each() through an array of cached elements in order to create a toggle effect inside of enquire.js driven js.

I'm getting errors left and right and would love your input. Thank you!

// I'm separating block A and B in declaration because the cached elements are used for other things
var $blockA = $('.block-a'),
  $blockB = $('.block-b');

// Creating array
var blockArray = [$blockA,$blockB];

var handler = function(el) {
  el.find('.block-content').toggle();
  el.closest('.wrapper').toggleClass('open');
};

blockArray.each(function() {
  enquire.register('screen and (max-width:1023px)', {
    match: function() {
    
      // Wrap each block in a .wrapper 
      $(this).wrap('<div class="wrapper"></div>');
      
      // .block-content should be hidden initially
      $(this).find('.block-content').hide();
     
      // .block-title will toggle its sibling .block-content
      $(this).find('.block-title').bind( "click", handler($(this)));

    },
    unmatch: function() {
    
      // Unwrap .wrapper
      $(this).unwrap();

      // Unbind so we don't end up with toggling block in desktop
      $(this).find('.block-title').unbind( "click", handler($(this)));
    }
  })
});

.block {
  margin:20px;
  background:#fff;
  border:1px solid black; 
  font:14px sans-serif;
  }
.block .block-title {
  background:#f4f4f4;
  padding:10px 15px;
  font-weight:bold;
  }
.block .block-content {
  padding:10px 15px;
  }

<div class="block-a block">
   <div class="block-title">
     Block A TItle
   </div>
   <div class="block-content">
     Bluh Bluh
   </div>
</div>
<div class="block-b block">
   <div class="block-title">
     Block B TItle
   </div>
   <div class="block-content">
     Bluh Bluh
   </div>
</div>

Answer 1

Here is the js update that works.

var handler = function($el) {
  $el.find('.block-content').toggle();
  $el.closest('.wrapper').toggleClass('open');
};e

$('.block').each(function() {
  var $el = $(this);
  enquire.register('screen and (min-width:768px)', {
    match: function() {
      $el.wrap('<div class="wrapper"></div>');
      $el.find('.block-content').hide();
      $el.find('.block-title').bind( "click", function() { handler($el); });

    },
    unmatch: function() {
      $el.unwrap();
      $el.find('.block-title').unbind( "click");
      $el.find('.block-content').show();
      $el.closest('.wrapper').removeClass('open')
    }
  })
});